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.

Tested on Mozilla Firefox 1.0.3 (Linux), Mozilla 1.7.8 (Linux), Epiphany 1.4.8 (Linux), 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
 */
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; };
            }
        }
        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>

posted at 00:00 | path: /web | permanent link to this entry