在焦点内容中禁用制表键模糊可编辑

Question

我完全知道这个问题看起来像是重复的，但事实并非如此。请阅读。

我有一个 div 标签，其属性为 contentEditable="true"。我正在努力做到这一点，这样我就可以在 div 内使用 Tab 键，而不会移动焦点。这里有一些我没有完全解决问题的代码：

var tab = function(id){
 if(event.keyCode === 9){
    event.preventDefault();
    document.getElementById(id).innerHTML += "&nbsp;&nbsp;&nbsp;&nbsp;";
    setCaretPos(id);
 }
}

var setCaretPos = function(id){
   var node = document.getElementById(id);
   node.focus();
   var textNode = node.firstChild;
   var caret = textNode.length;
   var range = document.createRange();
   range.setStart(textNode, caret);
   range.setEnd(textNode, caret);
   var sel = window.getSelection();
   sel.removeAllRanges();
   sel.addRange(range);
}

这基本上只是在 div 内文本值的末尾添加四个空格，然后将插入符号移到末尾。当我在其他行上使用制表符时，这会成为一个问题，因为它只会将制表符添加到末尾（如果我还没有在最后一行）。

所以，我想在插入符所在的位置插入四个空格。这就是麻烦来了。我会展示代码，但我不确定我做错了什么。我希望它在插入符号之前的文本中添加四个空格，然后在插入符号之后添加所有文本。这是代码：

var insertTabAtCaret = function(id){
   if(event.keyCode === 9){
       event.preventDefault();
       var box = document.getElementById(id);
       if(box.selectionStart || box.selectionStart == "0"){
           var startPos = box.selectionStart;
           var endPos = box.selectionEnd;
           box.innerHTML.substring(0, startPos) + "&nbsp;&nbsp;&nbsp;&nbsp;" + box.innerHTML.substring(endPos, box.innerHTML.length);
       }
    }
}

请帮忙！让我知道如何使用上述方法在 contentEditable div 中实现制表符！（我更喜欢正常的 JavaScript，但 jQuery 是允许的。请不要告诉我有关库、插件、扩展等的信息。我不想使用任何这些。）

Answer 1

document.querySelector("div").addEventListener("keydown",insertTabAtCaret);

function insertTabAtCaret(event){
   if(event.keyCode === 9){
       event.preventDefault();
       var range = window.getSelection().getRangeAt(0);

       var tabNode = document.createTextNode("\u00a0\u00a0\u00a0\u00a0");
       range.insertNode(tabNode);

       range.setStartAfter(tabNode);
       range.setEndAfter(tabNode); 
        
   }
}

div#editor{
  height: 200px;
  width:80%;
  border: solid
}

<div contenteditable id="editor">
some text
</div>

在焦点内容中禁用制表键模糊可编辑

Disable tab key blur in focused contentEditable

javascript

contenteditable

tabbing