我的网站上有一个简单的 HTML 文本区域。
现在，如果你点击其中的Tab，它会转到下一个字段。我想让 tab 按钮缩进几个空格。
我该怎么做？
【问题讨论】：
标签： javascript html textarea
大量借鉴其他类似问题的答案（发布在下面）...
document.getElementById('textbox').addEventListener('keydown', function(e) {
if (e.key == 'Tab') {
e.preventDefault();
var start = this.selectionStart;
var end = this.selectionEnd;
// set textarea value to: text before caret + tab + text after caret
this.value = this.value.substring(0, start) +
"\t" + this.value.substring(end);
// put caret at right position again
this.selectionStart =
this.selectionEnd = start + 1;
}
});<input type="text" name="test1" />
<textarea id="textbox" name="test2"></textarea>
<input type="text" name="test3" />【讨论】：
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;
}
}
}
此解决方案不需要 jQuery，并且会在页面上的所有文本区域上启用选项卡功能。
【讨论】：
this.selectionEnd = s+1; 替换为 this.selectionEnd = s + "\t".length;。使用变量或函数参数并将缩进字符存储在那里会更干净。但是您现在知道要替换什么了：+1 定义了插入符号移动了多少字符。
KeyboardEvent.keyCode 和 KeyboardEvent.which 是不推荐使用的属性。请改用KeyboardEvent.key。
正如其他人所写，您可以使用 JavaScript 来捕获事件，阻止默认操作（使光标不会移动焦点）并插入制表符。
但是，禁用默认行为使得不使用鼠标就无法将焦点移出文本区域。盲人用户只使用键盘与网页交互——他们看不到鼠标指针来做任何有用的事情，所以它是键盘或什么都没有。 tab 键是浏览文档的主要方式，尤其是表单。覆盖 tab 键的默认行为将使盲人用户无法将焦点移动到下一个表单元素。
因此，如果您正在为广大受众编写网站，我建议您不要在没有令人信服的理由的情况下这样做，并为盲人用户提供某种替代方案将它们困在文本区域中。
【讨论】：
对于它的价值，这是我的 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>在最新版本的 Chrome、Firefox、Internet Explorer 和 Edge 中进行测试。
【讨论】：
if(event.shiftKey){if(v.substring(s-1,s)==='\t'){this.value=v.substring(0,s-1)+v.substring(e);this.selectionStart=this.selectionEnd=s-1;}}
这是我的版本，支持：
$(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.value;
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>【讨论】：
现代方式，两者都直截了当，不会失去撤消（Ctrl+Z）最后更改的能力。
$('#your-textarea').keydown(function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode === $.ui.keyCode.TAB) {
e.preventDefault();
const TAB_SIZE = 4;
// The one-liner that does the magic
document.execCommand('insertText', false, ' '.repeat(TAB_SIZE));
}
});
更多关于execCommand：
正如评论中所指出的（虽然这是was once a "modern" solution），该功能已经过时了。引用文档：
此功能已过时。尽管它在某些浏览器中可能仍然有效，但不鼓励使用它，因为它可能随时被删除。尽量避免使用它。
【讨论】：
indent-textarea 以获得使用此方法的跨浏览器解决方案 + Firefox 中的后备。
execCommand）：“此功能已过时。尽管它在某些浏览器中可能仍然有效，但不鼓励使用它，因为它可能随时被删除。尽量避免使用它。'
尝试在 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>
【讨论】：
element.triggerHandler('change');很重要，否则模型不会更新（因为我认为element.triggerHandler('change');。
此解决方案允许像典型的代码编辑器一样在整个选择中使用选项卡，也可以取消该选择。但是，我还没有弄清楚如何在没有选择的情况下实现 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>【讨论】：
if (selected.length > 0) {...} Fiddle 做到了：jsfiddle.net/jwfkbjkr
你必须编写 JS 代码来捕捉 TAB 键并插入一堆空格。类似于 JSFiddle 所做的事情。
查看 jquery fiddle:
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');
}
});
【讨论】：
event.preventDefault();
e.keyCode || e.which。
基于@kasdega 解决方案的多行缩进脚本。
$('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;
}
});
【讨论】：
start === end 时创建选择。
按住 ALT 并按数字键盘上的 0,9。它适用于谷歌浏览器
【讨论】：
根据人们在此处回答的所有内容，它只是 keydown(not keyup) + preventDefault() + 在插入符号处插入制表符的组合。比如：
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
insertAtCaret('txt', '\t')
}
较早的答案有一个有效的 jsfiddle，但它在 keydown 上使用了一个 alert()。如果您删除此警报，则它不起作用。我刚刚添加了一个函数，可以在文本区域的当前光标位置插入一个选项卡。
这是一个同样的工作 jsfiddle： http://jsfiddle.net/nsHGZ/
【讨论】：
我看到这个问题没有解决。我对此进行了编码，并且运行良好。 它在光标索引处插入一个表格。不使用 jquery
<textarea id="myArea"></textarea>
<script>
document.getElementById("myArea").addEventListener("keydown",function(event){
if(event.code==="Tab"){
var cIndex=this.selectionStart;
this.value=[this.value.slice(0,cIndex),//Slice at cursor index
"\t", //Add Tab
this.value.slice(cIndex)].join('');//Join with the end
event.stopPropagation();
event.preventDefault(); //Don't quit the area
this.selectionStart=cIndex+1;
this.selectionEnd=cIndex+1; //Keep the cursor in the right index
}
});
</script>
【讨论】：
最简单的方法我发现在现代浏览器中使用vanilla JavaScript是：
<textarea name="codebox"></textarea>
<script>
const codebox = document.querySelector("[name=codebox]")
codebox.addEventListener("keydown", (e) => {
let { keyCode } = e;
let { value, selectionStart, selectionEnd } = codebox;
if (keyCode === 9) { // TAB = 9
e.preventDefault();
codebox.value = value.slice(0, selectionStart) + "\t" + value.slice(selectionEnd);
codebox.setSelectionRange(selectionStart+2, selectionStart+2)
}
});
</script>请注意，为了简单起见，我在此 sn-p 中使用了许多 ES6 功能，您可能需要在部署之前对其进行转译（使用 Babel 或 TypeScript）。
【讨论】：
以上回答全部擦除撤消历史。对于正在寻找不这样做的解决方案的任何人，我花了最后一个小时为 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 上按原样运行。
【讨论】：
我制作了一个，你可以使用任何你喜欢的 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>
【讨论】：
在 Github 上有一个库，由 wjbryant 在您的文本区域中提供选项卡支持：Tab Override
这就是它的工作原理：
// get all the textarea elements on the page
var textareas = document.getElementsByTagName('textarea');
// enable Tab Override for all textareas
tabOverride.set(textareas);
【讨论】：
每个输入文本区域元素都有一个 onkeydown 事件。在事件处理程序中，只要 event.keyCode 为 9，您就可以使用 event.preventDefault() 来防止 Tab 键的默认反应。
然后在正确的位置放一个制表符：
function allowTab(input)
{
input.addEventListener("keydown", function(event)
{
if(event.keyCode == 9)
{
event.preventDefault();
var input = event.target;
var str = input.value;
var _selectionStart = input.selectionStart;
var _selectionEnd = input.selectionEnd;
str = str.substring(0, _selectionStart) + "\t" + str.substring(_selectionEnd, str.length);
_selectionStart++;
input.value = str;
input.selectionStart = _selectionStart;
input.selectionEnd = _selectionStart;
}
});
}
window.addEventListener("load", function(event)
{
allowTab(document.querySelector("textarea"));
});
html
<textarea></textarea>
【讨论】：
简单的独立脚本：
textarea_enable_tab_indent = function(textarea) {
textarea.onkeydown = function(e) {
if (e.keyCode == 9 || e.which == 9){
e.preventDefault();
var oldStart = this.selectionStart;
var before = this.value.substring(0, this.selectionStart);
var selected = this.value.substring(this.selectionStart, this.selectionEnd);
var after = this.value.substring(this.selectionEnd);
this.value = before + " " + selected + after;
this.selectionEnd = oldStart + 4;
}
}
}
【讨论】：
作为上面 kasdega 代码的一个选项，您可以在当前光标点处插入字符，而不是将制表符附加到当前值。这样做的好处是：
所以替换
// set textarea value to: text before caret + tab + text after caret
$(this).val($(this).val().substring(0, start)
+ "\t"
+ $(this).val().substring(end));
与
// set textarea value to: text before caret + tab + text after caret
document.execCommand("insertText", false, ' ');
【讨论】：
您可以使用textarea 元素上可用的setRangeText() 方法在本机上执行此操作。
HTML
<textarea id='my-textarea' onkeydown="handleKeyDown(event)"></textarea>
JS
const handleKeyDown = e => {
if (e.key === 'Tab') {
e.preventDefault();
const textArea = e.currentTarget; // or use document.querySelector('#my-textarea');
textArea.setRangeText(
'\t',
textArea.selectionStart,
textArea.selectionEnd,
'end'
);
}
};
setRangeText 用于替换文本，但由于我们只想插入一个\t，我们只需将选择设置为当前选择的开始和结束。 'end' 值告诉方法将光标移动到插入文本的末尾。
额外的 CSS
如果要更改选项卡大小，可以在块元素上使用tab-size 属性。大多数浏览器的默认值为8。
textarea {
tab-size: 4;
}
【讨论】：
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;
}
}
【讨论】：
试试这个简单的 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();
【讨论】：
我必须创建一个函数来做同样的事情，它使用简单，只需将此代码复制到您的脚本并使用：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}}}
【讨论】：
$("textarea").keydown(function(event) {
if(event.which===9){
var cIndex=this.selectionStart;
this.value=[this.value.slice(0,cIndex),//Slice at cursor index
"\t", //Add Tab
this.value.slice(cIndex)].join('');//Join with the end
event.stopPropagation();
event.preventDefault(); //Don't quit the area
this.selectionStart=cIndex+1;
this.selectionEnd=cIndex+1; //Keep the cursor in the right index
}
});
【讨论】：
如果您确实需要标签，请从 word 或记事本中复制标签并将其粘贴到您想要的文本框中
1 2 3
12 22 33
不幸的是，我认为他们从这些 cmets 中删除了标签 :) 它将在您的 POST 或 GET 中显示为 %09
【讨论】：