<textarea>

Question

我知道之前曾有人问过这个问题（使用制表符缩进textarea < / a>），但是提供的答案不能解决我的问题。我的代码如下：

  $（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;
    }
  }

  / *此jQuery解决方案也不起作用
            $（'＃input'）。keydown（e => {
                var keyCode = e.keyCode || e。哪个;
    
                如果（keyCode == 9）{
                    e.preventDefault（）;
                    var start = this.selectionStart;
                    var end = this.selectionEnd;
    
                    //将textarea值设置为：尖号前的文本+制表符+尖号后的文本
                    $（this）.val（$（this）.val（）。substring（0，开始）
                                +“ \ t”
                                + $（this）.val（）。substring（end））;
    
                    //再次将插入符号置于正确的位置
                    this.selectionStart =
                    this.selectionEnd =开始+ 1;
                }
            }）;
            * /
}）;  

  <！doctype html>


<头>
  
  <脚本>
  


<身体>
   


  

浏览器是Mac上的Google Chrome 67。

Answer 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>