使用制表符在文本区域中缩进

javascript html textarea

2022-08-30 01:49:08

我的网站上有一个简单的HTML文本区域。

现在，如果您单击它，它将转到下一个字段。我想让选项卡按钮缩进几个空格。Tab

我该怎么做？

答案 1

大量借鉴其他类似问题的答案（张贴在下面）......

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" />

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

如何处理文本区域中的<选项卡>？

答案 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; 
        }
    }
}

此解决方案不需要 jQuery，并将在页面上的所有文本区域上启用选项卡功能。