javascript - Keypress in jQuery: Press TAB inside TEXTAREA (when editing an existing text) - Stack Overflow

admin管理员组

文章数量:1207145

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).

.php?t=34452
.php?t=32317
/

Please advise. Thanks.

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.

• javascript
• jquery
• keypress

Share Improve this question Follow asked Nov 15, 2009 at 20:59 Kristoffer BohmannKristoffer Bohmann 4,09433 gold badges3030 silver badges3535 bronze badges 1

• The link to Tabby died, but a GitHub repo is available: github.com/alanhogan/Tabby – Lars Ebert-Harlaar Commented Feb 8, 2014 at 16:54

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 13

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.

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.

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();
    }
}

btw, see also:
http://aspalliance.com/346_Tabbing_in_the_TextArea

本文标签： javascriptKeypress in jQuery Press TAB inside TEXTAREA (when editing an existing text)Stack Overflow