Tab in textarea

05/28/05 14:12:25 * *

Ever being annoyed by not being able to type TABs (keycode 9) when editing textareas in your favorite cms? Well after some research, I seem to have found a solution - at least for the more popular browsers. If anyone has an idea how to get the current cursor position in khtml based browsers (safari, konqueror), please drop me a note. The below was tested on the Mozilla platform and with Internet Explorer 6.0. ...

Ever being annoyed by not being able to type TABs (keycode 9) when editing textareas in your favorite cms? Well after some research, I seem to have found a solution - at least for the more popular browsers. If anyone has an idea how to get the current cursor position in khtml based browsers (safari, konqueror), please drop me a note. The below was tested on the Mozilla platform and with Internet Explorer 6.0. ...

<script type="text/javascript">
<!--

/**
* Insert a tab at the current text position in a textarea
* Jan Dittmer, jdittmer@ppp0.net, 2005-05-28
* Inspired by http://www.forum4designers.com/archive22-2004-9-127735.html
* Tested on: 
*   Mozilla Firefox 1.0.3 (Linux)
*   Mozilla 1.7.8 (Linux)
*   Epiphany 1.4.8 (Linux)
*   Internet Explorer 6.0 (Linux)
* Does not work in: 
*   Konqueror (no tab inserted, but focus stays)
*/
function insertTab(event,obj) {
    var tabKeyCode = 9;
    if (event.which) // mozilla
        var keycode = event.which;
    else // ie
        var keycode = event.keyCode;
    if (keycode == tabKeyCode) {
        if (event.type == "keydown") {
            if (obj.setSelectionRange) {
                // mozilla
                var s = obj.selectionStart;
                var e = obj.selectionEnd;
                obj.value = obj.value.substring(0, s) + 
                    "\t" + obj.value.substr(e);
                obj.setSelectionRange(s + 1, s + 1);
                obj.focus();
            } else if (obj.createTextRange) {
                // ie
                document.selection.createRange().text="\t"
                obj.onblur = function() { this.focus(); this.onblur = null; };
            } else {
                // unsupported browsers
            }
        }
        if (event.returnValue) // ie ?
            event.returnValue = false;
        if (event.preventDefault) // dom
            event.preventDefault();
        return false; // should work in all browsers
    }
    return true;
}

//-->
</script>
<textarea onkeydown="return insertTab(event,this);" 
      onkeyup="return insertTab(event,this);" 
      onkeypress="return insertTab(event,this);" 
      rows="30" cols="80">
</textarea>

Demo:

Page 1 / 1
Show other versions of this story

Attached file(s):

Comment(s) (Feed):

Iain at 03/17/07 23:29:42
Potential fix for the scroll-up bug
There's a chappy who has posted his own tabs in textarea script at blogs.pixeldepth.net/Peter/?p=106. I had to remove some of the extra bits that parses the message on submit, but it appears to not have the bug this script has. I haven't a clue how it works, let alone what the syntax being used is - so perhaps someone can decipher the useful parts?
Simon Lundmark at 03/01/07 21:39:06
Annoying bug...
Nice script... Just too bad that the textarea scrolls to top every time... Can someone fix this? Should just be to let it scroll down again x)
Christian at 02/25/07 22:41:48
Firefox on mac in php doc
very nice script, i have the same problem as Jan. The textarea goes to top when tabbing in a scrollbar textarea.
Ranjit at 01/02/07 19:42:13
konqueror almost
Works fine in konqueror as stated. If you are at the end of the field (last char) tho, it inserts the TAB and then sets the focus to the beginning of the text. Minor point- well done!
chotchki at 01/02/07 10:32:42
Work in Konqueror
Works in Konqueror version 3.5.5 (just tested it).
Uten at 12/22/06 13:27:59
Works in firefox
Works in firefox 1.5 (Debian) If scriptblocker (NoScripts) is disabled for the site.
JohnK at 11/24/06 23:40:30
Works in IE7
Just tested in IE7. Works great! Super-cool!
at 11/23/06 10:57:19
julian at 11/17/06 19:40:14
great
even works with firefox2.0 big thx
tom at 10/12/06 11:23:06
Thanks
Thank you for this script. Works perfect! This makes a textarea much more usefull.
Tim Price at 10/12/06 00:51:21
Problem with firefox
In firefox if there is a scrollbar on the text area that isn't at the top you will loose track of the curser until another key is pressed. Very small bug but thought it was worth mentioning in case anything can be done about it.
jan at 09/09/06 08:54:56
Re: doesn't work on firefox
Sorry, I made a js error while updating the page layout which disabled the function. Works again now! Jan
david at 09/08/06 22:51:05
doesn't work on firefox
tested it on this page, and doesn't actually work on firefox 1.5.0.6 (using Debian unstable/experimental)
roez at 08/31/06 10:39:15
blaat
works great, also in opera, made a function that ads a event to a textarea, now all i have to do is add a onload function to my page with the id of the textarea and it works, great for my admin systems
ionut gazdaru at 07/06/06 19:16:32
opera 9.01
it works partially in opera too, it enters the tab but looses focus.
codesmith at 06/29/06 00:55:59
Works in Safari
Just tested this in Safari 2.0.3 and it works. Cutting and pasting text that has tabs (like from Word) works too. Thanks!

Add Comment


(will be hidden)

very nice nice okay not so okay bad awful
Text:

Your IP address will be recorded