支持 <textarea> 中的缩进标签 [重复]答案

【问题标题】：Support tabs for indentation in <textarea> [duplicate]支持 <textarea> 中的缩进标签 [重复]
【发布时间】：2019-01-01 23:36:58
【问题描述】：

我知道之前有人问过这个问题 (Use tab to indent in textarea)，但提供的答案并没有解决我的问题。我的代码如下：

$(document).ready(() => {
  document.getElementById('input').onkeydown = 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;
    }
  }

  /* This jQuery solution doesn't work, either
            $('#input').keydown(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;
                }
            });
            */
});

<!doctype html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
  </script>
</head>

<body>
  <textarea id="input"></textarea>
</body>

</html>

浏览器是 Mac 上的 Google Chrome 67。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

这个问题完全是由您使用箭头函数引起的，这会影响逻辑运行的范围。因此this 是window，而不是引发事件的textarea。使用传统的匿名函数，您的代码可以正常工作 - 现在所有版本的 IE 也都支持。

还请注意，由于您已经在使用 jQuery，您也可以使用它来附加不显眼的事件处理程序以及用于修改表单控件值的简洁方法。试试这个：

$(function() {
  $('#input').on('keydown', function(e) {
    if (e.keyCode == 9 || e.which == 9) {
      e.preventDefault();
      var s = this.selectionStart;
      $(this).val(function(i, v) {
        return v.substring(0, s) + "\t" + v.substring(this.selectionEnd)
      });
      this.selectionEnd = s + 1;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="input"></textarea>

【讨论】：

谢谢，但是缩进宽度可以改变吗？虽然 StackOverflow 的“运行代码 sn-p”显示宽度为 4，但当我实际运行代码时它的宽度为 8。编辑：用 4 个空格替换 "\t" 不起作用。
当然，您可以插入 N 个空格而不是单个制表符。
请看编辑
我没有看到任何修改...？
我在上面的评论中添加了“用 4 个空格替换 "\t" 无效”。无论如何，只有一个空格被添加到 textarea 而不是 4。