如何处理textarea中的<tab>？

我想要一个textarea来处理按Tab键的情况。

在默认情况下，如果您按Tab键，焦点将离开textarea。 但是，当用户想要在textarea中inputtab键的情况呢？

我可以捕获这个事件并将焦点返回到textarea并添加一个选项卡到当前的光标位置？

Answer 1

你可以： http : //jsfiddle.net/sdDVf/8/ 。

---

$("textarea").keydown(function(e) { if(e.keyCode === 9) { // tab was pressed // get caret position/selection var start = this.selectionStart; var end = this.selectionEnd; var $this = $(this); var value = $this.val(); // set textarea value to: text before caret + tab + text after caret $this.val(value.substring(0, start) + "\t" + value.substring(end)); // put caret at right position again (add one for the tab) this.selectionStart = this.selectionEnd = start + 1; // prevent the focus lose e.preventDefault(); } }); 

Answer 2

这里是不需要JQuery的pimvdb的答案的修改版本：

 document.querySelector("textarea").addEventListener('keydown',function(e) { if(e.keyCode === 9) { // tab was pressed // get caret position/selection var start = this.selectionStart; var end = this.selectionEnd; var target = e.target; var value = target.value; // set textarea value to: text before caret + tab + text after caret target.value = value.substring(0, start) + "\t" + value.substring(end); // put caret at right position again (add one for the tab) this.selectionStart = this.selectionEnd = start + 1; // prevent the focus lose e.preventDefault(); } },false); 

我在Firefox 21.0和Chrome 27上testing过。不知道它是否可以在其他地方使用。

Answer 3

好神，以前所有的答案都没有提供一般的体面（即程序员）选项卡控制。

也就是说，在select行上按TAB将缩进这些行，并且SHIFT TAB将取消缩进它们。

_edited（2016年11月）：keyCodereplace为charCode || keyCode，每个KeyboardEvent.charCode – Web API | MDN

 (function($) { $.fn.enableSmartTab = function() { var $this; $this = $(this); $this.keydown(function(e) { var after, before, end, lastNewLine, changeLength, re, replace, selection, start, val; if ((e.charCode === 9 || e.keyCode === 9) && !e.altKey && !e.ctrlKey && !e.metaKey) { e.preventDefault(); start = this.selectionStart; end = this.selectionEnd; val = $this.val(); before = val.substring(0, start); after = val.substring(end); replace = true; if (start !== end) { selection = val.substring(start, end); if (~selection.indexOf('\n')) { replace = false; changeLength = 0; lastNewLine = before.lastIndexOf('\n'); if (!~lastNewLine) { selection = before + selection; changeLength = before.length; before = ''; } else { selection = before.substring(lastNewLine) + selection; changeLength = before.length - lastNewLine; before = before.substring(0, lastNewLine); } if (e.shiftKey) { re = /(\n|^)(\t|[ ]{1,8})/g; if (selection.match(re)) { start--; changeLength--; } selection = selection.replace(re, '$1'); } else { selection = selection.replace(/(\n|^)/g, '$1\t'); start++; changeLength++; } $this.val(before + selection + after); this.selectionStart = start; this.selectionEnd = start + selection.length - changeLength; } } if (replace && !e.shiftKey) { $this.val(before + '\t' + after); this.selectionStart = this.selectionEnd = start + 1; } } }); }; })(jQuery); $(function() { $("textarea").enableSmartTab(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea rows="10" cols="80"> /* Just some code to edit with our new superTab */ (function($) { $.fn.enableSmartTab = function() { $this = $(this); $this.keydown(function(e) { if ((e.charCode === 9 || e.keyCode === 9) && !e.metaKey && !e.ctrlKey && !e.altKey) { e.preventDefault(); } } } } </textarea> 

Answer 4

在香草（默认）JS这将是：

 var textareas = document.getElementsByTagName('textarea'); if ( textareas ) { for ( var i = 0; i < textareas.length; i++ ) { textareas[i].addEventListener( 'keydown', function ( e ) { if ( e.which != 9 ) return; var start = this.selectionStart; var end = this.selectionEnd; this.value = this.value.substr( 0, start ) + "\t" + this.value.substr( end ); this.selectionStart = this.selectionEnd = start + 1; e.preventDefault(); return false; }); } } 

Answer 5

search谷歌时发现这一点。 我做了一个很短的，也可以缩进和扭转缩进select的文本：

  jQ(document).on('keydown', 'textarea', function(e) { if (e.keyCode !== 9) return; var Z; var S = this.selectionStart; var E = Z = this.selectionEnd; var A = this.value.slice(S, E); A = A.split('\n'); if (!e.shiftKey) for (var x in A) { A[x] = '\t' + A[x]; Z++; } else for (var x in A) { if (A[x][0] == '\t') A[x] = A[x].substr(1); Z--; } A = A.join('\n'); this.value = this.value.slice(0, S) + A + this.value.slice(E); this.selectionStart = S != E ? S : Z;; this.selectionEnd = Z; e.preventDefault(); });