jQuery中的Keypress：在TEXTAREA中按TAB（编辑现有文本时）
我想在TEXTAREA中插入TAB字符，如下所示：
我可以在现有的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/
请指教。 谢谢。
我正在为自己创建一个支持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上运行。
不幸的是，操纵textarea元素中的文本并不像人们希望的那么简单。 Tabby比那些简单片段更大的原因是它更好用。 它具有更好的跨浏览器兼容性，可处理选项卡等选项。
缩小时，它只有大约5k。 我建议使用它。 您无论如何都要自己发现并解决相同的边缘情况，或者如果用户不报告它们，可能甚至不知道它们。
是的，处理不同浏览器中的输入字段选择是一个烦恼，特别是在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(); } }