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.我建议使用它.无论如何,您必须自己发现并排除相同的边缘情况,或者如果用户不报告它们,可能甚至不知道它们.