javascript - 如何模拟文本区域中的后退标签

Question

我正在尝试模拟文本区域中的 Tab 键，到目前为止 Tab 键前移有效，但我不太确定如何使 backtab 有效。有关如何执行此操作或更好的方法的任何建议都会有所帮助。

$('textarea').on('keydown mousedown', function(e){
  var val = this.value,
      start = this.selectionStart,
      end = this.selectionEnd;
  if (e.shiftKey) {
    console.log('shift')
    if (e.which == 9 || e.keyCode == 9) {
      console.log('shift + tab')
      e.preventDefault();
      this.value = val.substring(0, start) + '\t' + val.substring(end);
    }
  } else if (e.which == 9 || e.keyCode == 9) {
    console.log('tab')
    e.preventDefault();
    this.value = val.substring(0, start) + '\t' + val.substring(end);
  }
})

Answer 1

这可能会让您入门。

$('textarea').on('keydown mousedown', function(e) {
  var val   = this.value,
      start = this.selectionStart,
      end   = this.selectionEnd;

  if (e.which == 9 || e.keyCode == 9) {
    e.preventDefault();
    
    if (e.shiftKey) {
      var firstTabPoint = val.lastIndexOf('\n', start) + 1;

      if (val.substring(firstTabPoint, firstTabPoint + 1) == '\t') {
        var startString = val.substr(0, firstTabPoint);
        var endString = val.substr(firstTabPoint + 1);

        this.value = startString + endString;
        this.setSelectionRange(start - 1, end - 1);
      }
    } else {
      this.value = val.substring(0, start) + '\t' + val.substring(end);
      this.setSelectionRange(start + 1, end + 1);
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea rows="20" cols="100">
Add some lines in here, tab them, and then try untabbing.
</textarea>

作为旁注，如果您正在制作文本编辑器应用程序，您可能会查看属性 contenteditable="true"。