在可编辑的 div 中输入制表键

在 Web 开发中，对于可编辑的 div，有时需要在其中输入制表键（tab），以实现缩进等功能。但是，普通的 div 无法直接输入制表键，这就需要用 JavaScript 来处理。

实现方式

以下是一种实现方式，通过监听按键事件，当检测到按下了制表键时，将其转换为对应的字符或字符串，插入到光标所在位置。

var div = document.getElementById("editable-div");

div.addEventListener("keydown", function(event) {
  // 检测是否按下了制表键（keyCode：9）
  if (event.keyCode === 9) {
    // 阻止默认事件
    event.preventDefault();

    // 获取光标所在位置（start 和 end）
    var start = this.selectionStart;
    var end = this.selectionEnd;

    // 如果起始位于行首，添加一个缩进（使用空格替代制表键）
    if (this.value.charAt(start - 1) === "\n") {
      this.value = this.value.slice(0, start) + "  " + this.value.slice(end);
      this.selectionStart = start + 2;
      this.selectionEnd = end + 2;
    } 
    // 否则，插入一个制表符
    else {
      this.value = this.value.slice(0, start) + "\t" + this.value.slice(end);
      this.selectionStart = start + 1;
      this.selectionEnd = end + 1;
    }
  }
});

解释说明

以上代码中，通过使用 addEventListener 监听了可编辑 div 的 keydown 事件。当检测到按下了制表键（keyCode === 9）时，先阻止默认事件，并获取光标所在的位置。

接着，判断光标是否在行首。如果是，则在光标所在位置添加一个缩进（使用两个空格替代制表键）。否则，在光标所在位置插入一个制表符。同时，将光标位置更新至刚刚插入或替换字符的位置。

注意事项

• 上述代码是一种实现方式，也可以通过其他方式来实现输入制表键的功能。
• 输入制表键的效果可能因不同的浏览器而有所差异。在不同的浏览器下测试时，需要注意区别。