使用标签在textarea中缩进

我有一个简单的html textarea在我身边。 现在，如果您单击其中的选项卡，它将转到下一个字段。 我想使标签button缩进几个空格。 我怎样才能做到这一点？ 谢谢。

Answer 1

大量借鉴其他类似问题的答案（下面贴出来）…

$(document).delegate('#textbox', 'keydown', function(e) { var keyCode = e.keyCode || e.which; if (keyCode == 9) { e.preventDefault(); var start = this.selectionStart; var end = this.selectionEnd; // set textarea value to: text before caret + tab + text after caret $(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring(end)); // put caret at right position again this.selectionStart = this.selectionEnd = start + 1; } }); 

jQuery：如何捕获文本框中的TAB键

如何处理textarea中的<tab>？

http://jsfiddle.net/jz6J5/

Answer 2

 var textareas = document.getElementsByTagName('textarea'); var count = textareas.length; for(var i=0;i<count;i++){ textareas[i].onkeydown = function(e){ if(e.keyCode==9 || e.which==9){ e.preventDefault(); var s = this.selectionStart; this.value = this.value.substring(0,this.selectionStart) + "\t" + this.value.substring(this.selectionEnd); this.selectionEnd = s+1; } } } 

这个解决scheme不需要jQuery，并将在页面上的所有textareas上启用选项卡function。

Answer 3

正如其他人所写的，您可以使用JavaScript来捕获事件，防止默认操作（以便光标不会移动焦点）并插入制表符。

但是 ，禁用默认行为将无法使用鼠标将焦点移出文本区域。 盲人用户使用键盘与网页进行交互，而没有其他任何东西 – 他们不能看到鼠标指针做任何有用的事情，所以它是键盘或什么都没有。 制表键是浏览文档的主要方式，尤其是表单。 重写Tab键的默认行为将使盲人用户无法将焦点移到下一个表单元素。

所以，如果你正在为广泛的读者撰写一个网站，我build议不要这样做，没有一个令人信服的理由，并为盲人用户提供了一些替代scheme，而不是把他们困在textarea。

Answer 4

为了什么是值得的，这里是我的oneliner，因为你在这个线程中一直在谈论什么：

 <textarea onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'\t'+v.substring(e);this.selectionStart=this.selectionEnd=s+1;return false;}"> </textarea> 

Answer 5

我在AngularJS环境中试图使用@ kasdega的答案时，我没有做任何事情，但我所尝试的任何东西似乎都无法使Angular行为发生改变。 所以如果路人有什么用处的话，这里是重写@ kasdega的代码，AngularJS风格，这对我来说很有用：

 app.directive('ngAllowTab', function () { return function (scope, element, attrs) { element.bind('keydown', function (event) { if (event.which == 9) { event.preventDefault(); var start = this.selectionStart; var end = this.selectionEnd; element.val(element.val().substring(0, start) + '\t' + element.val().substring(end)); this.selectionStart = this.selectionEnd = start + 1; element.triggerHandler('change'); } }); }; }); 

和：

 <textarea ng-model="mytext" ng-allow-tab></textarea> 

Answer 6

你必须写JS代码来捕捉TAB键按下并插入一堆空格。 与JSFiddle类似的东西。

检查jquery 小提琴 ：

HTML ：

 <textarea id="mybox">this is a test</textarea> 

JavaScript ：

 $('#mybox').live('keydown', function(e) { var keyCode = e.keyCode || e.which; if (keyCode == 9) { e.preventDefault(); alert('tab pressed'); } });​ 

Answer 7

基于@ kasdega解决scheme的多行标注脚本。

 $('textarea').on('keydown', function (e) { var keyCode = e.keyCode || e.which; if (keyCode === 9) { e.preventDefault(); var start = this.selectionStart; var end = this.selectionEnd; var val = this.value; var selected = val.substring(start, end); var re = /^/gm; var count = selected.match(re).length; this.value = val.substring(0, start) + selected.replace(re, '\t') + val.substring(end); this.selectionStart = start; this.selectionEnd = end + count; } }); 

Answer 8

这个解决scheme允许像典型的代码编辑器那样在整个选项中进行制表，并且也可以解除这个select。 但是，我没有想到如何在没有select的情况下实现shift-tab。

 $('#txtInput').on('keydown', function(ev) { var keyCode = ev.keyCode || ev.which; if (keyCode == 9) { ev.preventDefault(); var start = this.selectionStart; var end = this.selectionEnd; var val = this.value; var selected = val.substring(start, end); var re, count; if(ev.shiftKey) { re = /^\t/gm; count = -selected.match(re).length; this.value = val.substring(0, start) + selected.replace(re, '') + val.substring(end); // todo: add support for shift-tabbing without a selection } else { re = /^/gm; count = selected.match(re).length; this.value = val.substring(0, start) + selected.replace(re, '\t') + val.substring(end); } if(start === end) { this.selectionStart = end + count; } else { this.selectionStart = start; } this.selectionEnd = end + count; } }); 

 #txtInput { font-family: monospace; width: 100%; box-sizing: border-box; height: 200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea id="txtInput"> $(document).ready(function(){ $("#msgid").html("This is Hello World by JQuery"); }); </textarea> 

Answer 9

基于所有的人不得不在这里的答案，它只是一个组合keydown（不keyup）+ preventDefault（）+插入一个制表符在插入符号。 就像是：

 var keyCode = e.keyCode || e.which; if (keyCode == 9) { e.preventDefault(); insertAtCaret('txt', '\t') } 

前面的答案有一个工作jsfiddle，但它在keydown上使用alert（）。 如果你删除这个警报，那么它没有工作。 我刚刚添加了一个函数来插入一个选项卡在textarea当前光标位置。

这里工作jsfiddle相同： http : //jsfiddle.net/nsHGZ/

Answer 10

按住ALT并从数字键盘按0,9。 它在谷歌浏览器中工作

Answer 11

以上的答案都是抹消历史。 对于任何寻找解决scheme的人，我都花了最后一个小时为Chrome编码：

 jQuery.fn.enableTabs = function(TAB_TEXT){ // options if(!TAB_TEXT)TAB_TEXT = '\t'; // text input event for character insertion function insertText(el, text){ var te = document.createEvent('TextEvent'); te.initTextEvent('textInput', true, true, null, text, 9, "en-US"); el.dispatchEvent(te); } // catch tab and filter selection jQuery(this).keydown(function(e){ if((e.which || e.keyCode)!=9)return true; e.preventDefault(); var contents = this.value, sel_start = this.selectionStart, sel_end = this.selectionEnd, sel_contents_before = contents.substring(0, sel_start), first_line_start_search = sel_contents_before.lastIndexOf('\n'), first_line_start = first_line_start_search==-1 ? 0 : first_line_start_search+1, tab_sel_contents = contents.substring(first_line_start, sel_end), tab_sel_contents_find = (e.shiftKey?new RegExp('\n'+TAB_TEXT, 'g'):new RegExp('\n', 'g')), tab_sel_contents_replace = (e.shiftKey?'\n':'\n'+TAB_TEXT); tab_sel_contents_replaced = (('\n'+tab_sel_contents) .replace(tab_sel_contents_find, tab_sel_contents_replace)) .substring(1), sel_end_new = first_line_start+tab_sel_contents_replaced.length; this.setSelectionRange(first_line_start, sel_end); insertText(this, tab_sel_contents_replaced); this.setSelectionRange(first_line_start, sel_end_new); }); }; 

简而言之，选项卡插入在所选行的开头。

JSFiddle： http : //jsfiddle.net/iausallc/5Lnabspr/11/

要点： https ： //gist.github.com/iautomation/e53647be326cb7d7112d

用法示例： $('textarea').enableTabs('\t')

缺点：只能在Chrome上运行。

Answer 12

 if (e.which == 9) { e.preventDefault(); var start = $(this).get(0).selectionStart; var end = $(this).get(0).selectionEnd; if (start === end) { $(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring(end)); $(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 1; } else { var sel = $(this).val().substring(start, end), find = /\n/g, count = sel.match(find) ? sel.match(find).length : 0; $(this).val($(this).val().substring(0, start) + "\t" + sel.replace(find, "\n\t") + $(this).val().substring(end, $(this).val().length)); $(this).get(0).selectionStart = $(this).get(0).selectionEnd = end+count+1; } } 

Answer 13

除了@kasdega所说的，在Webkit中，为了看到带有正确缩进的制表符，使用下面的样式：

 #textbox { text-rendering: optimizeSpeed; } 

这适用于Chrome 32。

尝试@ kasdega的jsfiddle与此加法

Answer 14

试试这个简单的jQuery函数：

 $.fn.getTab = function () { this.keydown(function (e) { if (e.keyCode === 9) { var val = this.value, start = this.selectionStart, end = this.selectionEnd; this.value = val.substring(0, start) + '\t' + val.substring(end); this.selectionStart = this.selectionEnd = start + 1; return false; } return true; }); return this; }; $("textarea").getTab(); // You can also use $("input").getTab(); 

Answer 15

我不得不做一个函数来做同样的事情，它使用起来很简单，只需将这段代码复制到脚本中，然后使用： enableTab( HTMLElement ) HTMLelement就像document.getElementById( id )

---

代码是：

 function enableTab(t){t.onkeydown=function(t){if(9===t.keyCode){var e=this.value,n=this.selectionStart,i=this.selectionEnd;return this.value=e.substring(0,n)+" "+e.substring(i),this.selectionStart=this.selectionEnd=n+1,!1}}} 

Answer 16

Github上有一个库供wjbryant在你的textareas标签支持： Tab Override

这是如何工作的：

 // get all the textarea elements on the page var textareas = document.getElementsByTagName('textarea'); // enable Tab Override for all textareas tabOverride.set(textareas); 

Answer 17

这是我的这个版本，支持：

• 标签+换档标签
• 维护简单的制表符插入的撤消堆栈
• 支持块行缩进/ unindent但垃圾撤消堆栈
• 块缩进/缩进时适当select整行
• 支持自动缩进按回车（保持撤消堆栈）
• 使用退出键取消支持在下一个标签/回车键（这样你可以按Escape键，然后标签出）
• 适用于Chrome + Edge，未经testing。

 $(function() { var enabled = true; $("textarea.tabSupport").keydown(function(e) { // Escape key toggles tab on/off if (e.keyCode==27) { enabled = !enabled; return false; } // Enter Key? if (e.keyCode === 13 && enabled) { // selection? if (this.selectionStart == this.selectionEnd) { // find start of the current line var sel = this.selectionStart; var text = $(this).val(); while (sel > 0 && text[sel-1] != '\n') sel--; var lineStart = sel; while (text[sel] == ' ' || text[sel]=='\t') sel++; if (sel > lineStart) { // Insert carriage return and indented text document.execCommand('insertText', false, "\n" + text.substr(lineStart, sel-lineStart)); // Scroll caret visible this.blur(); this.focus(); return false; } } } // Tab key? if(e.keyCode === 9 && enabled) { // selection? if (this.selectionStart == this.selectionEnd) { // These single character operations are undoable if (!e.shiftKey) { document.execCommand('insertText', false, "\t"); } else { var text = $(this).val(); if (this.selectionStart > 0 && text[this.selectionStart-1]=='\t') { document.execCommand('delete'); } } } else { // Block indent/unindent trashes undo stack. // Select whole lines var selStart = this.selectionStart; var selEnd = this.selectionEnd; var text = $(this).val(); while (selStart > 0 && text[selStart-1] != '\n') selStart--; while (selEnd > 0 && text[selEnd-1]!='\n' && selEnd < text.length) selEnd++; // Get selected text var lines = text.substr(selStart, selEnd - selStart).split('\n'); // Insert tabs for (var i=0; i<lines.length; i++) { // Don't indent last line if cursor at start of line if (i==lines.length-1 && lines[i].length==0) continue; // Tab or Shift+Tab? if (e.shiftKey) { if (lines[i].startsWith('\t')) lines[i] = lines[i].substr(1); else if (lines[i].startsWith(" ")) lines[i] = lines[i].substr(4); } else lines[i] = "\t" + lines[i]; } lines = lines.join('\n'); // Update the text area this.value = text.substr(0, selStart) + lines + text.substr(selEnd); this.selectionStart = selStart; this.selectionEnd = selStart + lines.length; } return false; } enabled = true; return true; }); }); 

 textarea { width: 100%; height: 100px; tab-size: 4; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea class="tabSupport">if (something) { // This textarea has "tabSupport" CSS style // Try using tab key // Try selecting multiple lines and using tab and shift+tab // Try pressing enter at end of this line for auto indent // Use Escape key to toggle tab support on/off // eg: press Escape then Tab to go to next field } </textarea> <textarea>This text area doesn't have tabSupport class so disabled here</textarea> 

Answer 18

我做了一个，你可以访问任何你喜欢的textarea元素：

 function textControl (element, event) { if(event.keyCode==9 || event.which==9) { event.preventDefault(); var s = element.selectionStart; element.value = element.value.substring(0,element.selectionStart) + "\t" + element.value.substring(element.selectionEnd); element.selectionEnd = s+1; } } 

元素看起来像这样：

 <textarea onkeydown="textControl(this,event)"></textarea> 

Answer 19

如果你真的需要选项卡从单词或记事本复制一个标签，并将其粘贴在你想要的文本框中

1 2 3

12 22 33

不幸的是，我认为他们从这些评论删除标签:)它会显示为您的POST或GET中的％09