Tabbing in the TextArea
page 1 of 1
Published: 03 Jan 2004
Unedited - Community Contributed
Abstract
Who said that you cannot insert tabs in an text area via the keyboard in the web browser? Someone that I know was looking for something like this and I was determined to find the answer.
by Justin Lovell
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 15715/ 46

Sometimes we all need to insert a tab into a text area or a text box. In times past, we would have to create the tab character somewhere else, copy it to our clipboard, and instead of pressing the tab key, we would paste it from our clipboards. All of us are programmers and know that this breaks our flow very easily, but I have arrived at a better solution.

The JavaScript to do this is very simple. The only con of this approach is that it is an Internet Explorer 5+ trick, but here it is:

<script language="JavaScript">
function AllowTabCharacter() {
if (event != null) {
if (event.srcElement) {
if (event.srcElement.value) {
   if (event.keyCode == 9) { // tab character
if (document.selection != null) {

       document.selection.createRange().text = '\t';
       event.returnValue = false;
   }
else {
event.srcElement.value += '\t';
return false;
}
}
}
}
}
}
</script>

The code ensures that the browser can support events at first. Then the code checks if the browser supports the W3C standards of the event model by checking if the element that caused the event to fire exists. It then checks if the element is a input field or text area. From there it checks the key code that fired the event. The Unicode key code for the tab character is "9."

At this point, we test to see if the browser supports user selections in text. If the browser does, we then insert the tab character in the current place in the input field. If the browser does not support this, we append a tab character at the end of the input field.

To use the above code, here is some sample code:

<textarea onkeydown="AllowTabCharacter()"></textarea>

Happy Programming!



User Comments

Title: upgraded code   
Name: ted devito
Date: 2009-01-11 2:23:17 AM
Comment:
hey there. nice job on the code.

i've been scouring the web for this and didn't find anything that quite did it, so came up with this. hope you don't mind i share it here, as i spent some time reading and testing your code on my "journey"!

it's compatible with Chrome 1.0, FF 3.0, IE 7, and Safari 3.2. still has some issues with focus() in Opera.

http://teddevito.com/demos/textarea.html

features:
- TAB or SHIFT+TAB to indent / outdent
- single or multi-line
- cross-browser compatible

it uses the jQuery library
Title: improvement   
Name: steffen buchner
Date: 2008-05-20 2:57:39 PM
Comment:
Hi!

You should add event.srcElement.focus();!
Because if you press TAB, the textarea is left.

Improved code: http://www.my404.de/anything/tabintextarea.txt

Sincerely
Title: super man   
Name: josh
Date: 2007-12-04 10:59:15 AM
Comment:
it works, but then you can't tab out of the box :( hmmm choices, choices...
Title: Opera   
Name: Pallieter Koopmans
Date: 2007-08-22 4:40:56 AM
Comment:
\
Title: Broken in FF   
Name: ArcaneMachinist
Date: 2007-05-05 4:55:03 PM
Comment:
I tried using this in FF and it doesn't seem to work. It does however work in IE7.

Any idea how to get it to work in FF?
Title: Atul   
Name: Atul Khandelwal
Date: 2007-03-28 5:10:43 AM
Comment:
this scripts are vary helpful and imp tip
Title: Mahesh   
Name: Mahesh
Date: 2006-10-07 9:38:09 AM
Comment:
A very helpful and important tip.
Title: C.   
Name: P.
Date: 2006-05-26 12:56:16 AM
Comment:
Brilliant! Works perfectly.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-10-07 6:20:52 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search