javascript - jQuery 中的按键：在 TEXTAREA 内按 TAB（编辑现有文本时）

Question

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

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

我可以在现有 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 有一个“textarea 中的选项卡”插件（“Tabby”）——但它有 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是文本区域的 ID。

该代码不完全是我的，我在 Google 某处找到了它。

我只在 FF 3.5 和 IE7 上测试过它。遗憾的是，它在 IE7 上不起作用。

Answer 2

不幸的是，在 textarea 元素中操作文本并不像人们希望的那么简单。Tabby 比那些简单的片段更大的原因是它工作得更好。它具有更好的跨浏览器兼容性，并处理诸如选项卡选择之类的事情。

缩小后，它只有大约 5k。我建议使用它。无论如何，您要么必须自己发现和解决这些相同的边缘情况，要么如果用户不报告它们甚至可能不知道它们。

Answer 3

是的，处理跨不同浏览器的输入字段选择是一件令人烦恼的事情，尤其是在 IE 中，有一些方法看起来应该可以工作，但实际上却没有。（值得注意的是，使用setEndPointthen measure 组合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