Keypress in jQuery: Press TAB inside TEXTAREA (when editing an existing text)

Question

I want to insert TAB characters inside a TEXTAREA, like this:

<textarea>{KEYPRESS-INSERTS-TAB-HERE}Hello World</textarea>

I can insert before/after the existing TEXTAREA text - and I can insert / replace all text in the TEXTAREA - but have not yet been able to insert inside the existing TEXTAREA text (by the cursor) in a simple way.

$('textarea:input').live('keypress', function(e) {
 if (e.keyCode == 9) {
  e.preventDefault();

  // Press TAB to append a string (keeps the original TEXTAREA text).
  $(this).append("TAB TAB TAB AFTER TEXTAREA TEXT");

  // Press TAB to append a string (keeps the original TEXTAREA text).
  $(this).focus().prepend("TAB TAB TAB BEFORE TEXTAREA TEXT");

  // Press TAB to replace a all text inside TEXTAREA.
  $(this).val("INSERT INTO TEXTAREA / REPLACE EXISTING TEXT");

 }
});

There is a "tabs in textarea" plug-in for jQuery ("Tabby") - but it's 254 code lines - I was hoping for just a few lines of code.

A few links that I studied: (again, I would prefer fewer code lines).

http://www.dynamicdrive.com/forums/showthread.php?t=34452
http://www.webdeveloper.com/forum/showthread.php?t=32317
http://pallieter.org/Projects/insertTab/

Please advise. Thanks.

Answer 1

Unfortunately, manipulating the text inside textarea elements is not as simple as one might hope. The reason that Tabby is larger than those simple snippets is that it works better. It has better cross-browser compatibility and handles things like tabbing selections.

When minified, it's only about 5k. I'd suggest using it. You'll either have to discover and troubleshoot those same edge cases yourself anyway, or might not even know about them if users don't report them.

Answer 2

I was creating a AJAX powered simple IDE for myself so I can rapidly test out PHP snippets.

I remember stumbling upon the same problem, here's how I solved it:

$('#input').keypress(function (e) {
    if (e.keyCode == 9) {
     var myValue = "\t";
     var startPos = this.selectionStart;
     var endPos = this.selectionEnd;
     var scrollTop = this.scrollTop;
     this.value = this.value.substring(0, startPos) + myValue + this.value.substring(endPos,this.value.length);
     this.focus();
     this.selectionStart = startPos + myValue.length;
     this.selectionEnd = startPos + myValue.length;
     this.scrollTop = scrollTop;

     e.preventDefault();
    }
});

#input is the ID of the textarea.

The code is not completely mine, I found it on Google somewhere.

I've only tested it on FF 3.5 and IE7. It does not work on IE7 sadly.

Answer 3

Yeah, dealing with input field selections across the different browsers is an annoyance, especially as in IE there are a few methods that look like they should work but actually don't. (Notably, combining using setEndPoint then measuring length, which looks OK until the selection starts or ends in newlines.)

Here's a couple of utility functions I use to deal with input selections. It returns the value of the input split into bits that are before, inside and after the selection (with the selection counting as an empty string at the input focus position if it's not a selection). This makes it fairly simply to replace and insert content at the point you want, whilst taking care of the IE CRLF problem.

(There may be a jQuery that does something like this, but I have yet to meet one.)

// getPartitionedValue: for an input/textarea, return the value text, split into
// an array of [before-selection, selection, after-selection] strings.
//
function getPartitionedValue(input) {
    var value= input.value;
    var start= input.value.length;
    var end= start;
    if (input.selectionStart!==undefined) {
        start= input.selectionStart;
        end= input.selectionEnd;
    } else if (document.selection!==undefined) {
        value= value.split('\r').join('');
        start=end= value.length;
        var range= document.selection.createRange();
        if (range.parentElement()===input) {
            var start= -range.moveStart('character', -10000000);
            var end= -range.moveEnd('character', -10000000);
            range.moveToElementText(input);
            var error= -range.moveStart('character', -10000000);
            start-= error;
            end-= error;
        }
    }
    return [
        value.substring(0, start),
        value.substring(start, end),
        value.substring(end)
    ];
}

// setPartitionedValue: set the value text and selected region in an input/
// textarea.
//
function setPartitionedValue(input, value) {
    var oldtop= input.scrollTop!==undefined? input.scrollTop : null;
    input.value= value.join('');
    input.focus();
    var start= value[0].length;
    var end= value[0].length+value[1].length;
    if (input.selectionStart!==undefined) {
        input.selectionStart= start;
        input.selectionEnd= end;
        if (oldtop!==null)
            input.scrollTop= oldtop;
    }
    else if (document.selection!==undefined) {
        var range= input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', end);
        range.moveStart('character', start);
        range.select();
    }
}

Answer 4

btw, see also:
http://aspalliance.com/346%5FTabbing%5Fin%5Fthe%5FTextArea