jQuery中的Keypress：在TEXTAREA中按TAB（編輯現有文本時）

Question

我想在TEXTAREA中插入TAB字符，如下所示：

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

我可以將現有的TEXTAREA文本后插入前/ -我可以插入/ 替換文本區域中的所有文本 -但至今尚未能以簡單的方式將現有的TEXTAREA文本（光標） 內插入。

$('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");

    }
});

jQuery（ “Tabby” ）有一個“textarea中的選項卡”插件 - 但是它有254行代碼 - 我希望只有幾行代碼。

我研究的一些鏈接:(再次，我更喜歡更少的代碼行）。

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

請指教。 謝謝。

Answer 1

我正在為自己創建一個支持AJAX的簡單IDE，因此我可以快速測試PHP代碼片段。

我記得絆倒了同樣的問題，這就是我如何解決它：

$('#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是textarea的ID。

代碼並不完全是我的，我在谷歌的某處發現了它。

我只在FF 3.5和IE7上測試過它。 它遺憾地無法在IE7上運行。

Answer 2

不幸的是，操縱textarea元素中的文本並不像人們希望的那么簡單。 Tabby比那些簡單片段更大的原因是它更好用。 它具有更好的跨瀏覽器兼容性，可處理選項卡等選項。

縮小時，它只有約5k。 我建議使用它。 無論如何，您必須自己發現並排除相同的邊緣情況，或者如果用戶不報告它們，可能甚至不知道它們。

Answer 3

是的，處理不同瀏覽器中的輸入字段選擇是一個煩惱，特別是在IE中有一些看起來應該工作但實際上沒有的方法。 （值得注意的是，使用setEndPoint進行組合，然后測量length ，直到選擇開始或以換行結束時看起來沒問題。）

這里有一些我用來處理輸入選擇的實用函數。 它將輸入拆分的值返回到選擇之前，之內和之后的位（如果選擇不是選擇，則選擇計數為輸入焦點位置的空字符串）。 這樣可以非常簡單地在您想要的位置替換和插入內容，同時處理IE CRLF問題。

（可能有一個jQuery做這樣的事情，但我還沒有遇到過。）

// 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

順便說一下，另見：
http://aspalliance.com/346_Tabbing_in_the_TextArea