Question

我有一个函数可以将单词分成单独的 span 标签并更新我正在输入的 div，但是每次我更新 innerHTML 时，光标都会移动到框的开头，所以我输入的下一个字符会输出到最后一个字符后面在它之后。有人能告诉我如何阻止光标这样做吗？

这是我的代码

const editorDiv = document.getElementById('editor');

function wrapWords(str, tmpl) {   //separates words into <span>
  return str.replace(/\w+/g, tmpl || "<span>$&</span>");
}

editorDiv.addEventListener('keydown', function(event) {
  editorDiv.innerHTML = wrapWords(editorDiv.innerText)
});

<div id="editor" contenteditable="true">
  <span>hello</span>
</div>

当我输入 div 文本时，如下所示： .siht ekil skool txeT

Answer 1

我过去解决这个问题的一种方法是使用 2 个单独的元素，它们彼此重叠，位置：绝对，以便它们以像素完美的方式重叠。< /p>

顶部的元素是常规输入元素，其文本颜色设置为透明。
它后面的元素包含样式文本（跨度等）

这样，您可以在用户键入时替换样式化的内容，而完全不干扰输入元素的光标。

抱歉，我手头没有“基本代码片段”，但我希望您能理解。它在实践中对我来说效果很好。

每次更改innerHTML时如何停止光标移动到开头？

1 个答案: