我的网站上有一个简单的 HTML 文本区域。
现在，如果您单击Tab它，它会转到下一个字段。我想让标签按钮缩进几个空格。
我怎样才能做到这一点？
使用制表符在 textarea 中缩进
IT技术
javascript
html
textarea
2021-01-14 05:12:59
6个回答
从类似问题的其他答案中大量借用（在下面发布）......
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，并且将在页面上的所有文本区域上启用选项卡功能。
正如其他人所写，您可以使用 JavaScript 来捕获事件，阻止默认操作（使光标不会移动焦点）并插入制表符。
但是，禁用默认行为将无法在不使用鼠标的情况下将焦点移出文本区域。盲人用户只使用键盘与网页交互——他们看不到鼠标指针来做任何有用的事情，所以它是键盘还是什么都没有。Tab 键是导航文档，尤其是表单的主要方式。覆盖 tab 键的默认行为将使盲人用户无法将焦点移动到下一个表单元素。
因此，如果您正在为广大受众编写网站，我建议您在没有令人信服的理由的情况下不要这样做，并为盲人用户提供某种替代方案，以免将他们困在 textarea 中。
对于它的value，这是我的 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 中进行测试。
这是我的版本，支持：
- 制表符 + 移位制表符
- 为简单的制表符插入维护撤消堆栈
- 支持块行缩进/取消缩进，但会破坏撤消堆栈
- 块缩进/取消缩进时正确选择整行
- 支持按回车自动缩进（维护撤消堆栈）
- 在下一个选项卡/输入键上使用 Escape 键取消支持（因此您可以按 Escape 然后退出）
- 适用于 Chrome + Edge，其他未经测试。
$(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>