javascript - jQuery 中的按键 : Press TAB inside TEXTAREA (when editing an existing text)

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 的“文本区域中的选项卡”插件 ("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 是textarea的ID。

代码不完全是我的，我是在谷歌某处找到的。

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