如何在文本区域中模拟反向Tab键

Question

如何在文本区域中模拟反向Tab键

4

我正在尝试模拟在textarea中使用tab键缩进，目前向前的tab键可以使用，但是我不太确定如何使后退tab键起作用。有没有关于如何实现这一点的建议，或者更好的方法将会很有帮助。

$('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);
  }
})

- halfacreyum

如果我理解正确的话，您想编辑文本区域以删除行首的 '\t' 字符？您要针对哪些浏览器？如果是 IE8 之前的版本，您可能需要处理文本范围，否则您可以使用 selectionStart/selectionEnd 找到所在行并删除该行上第一个 \t 的实例。 - wackozacko

这真的很重要吗？我问这个问题是因为你正在覆盖浏览器的预期行为，这是我不轻易做的事情。 - Bindrid

作为一个副业项目，我正在构建一个代码编辑器，它将仅覆盖每个代码面板中使用的文本区域。上面的代码只是一个示例。最终代码不会针对每个文本区域。 - halfacreyum

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- wackozacko · Accepted Answer

这可能会让你有一个开端。

$('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"。