javascript - 在 contenteditable div 中更改 innerHTML 时保留光标位置

Question

我正在构建一个对代码进行语法突出显示的编辑器。我目前的方法是只获取编辑器中的文本(一个 contenteditable 设置为 true 的 div)并检查字符串中的正则表达式匹配。然后我用 <span> 替换匹配项元素并将一些样式应用于这些 span 元素。然后我使用 .innerHTML 将分隔符中的完整文本替换为新文本。属性。这工作得很好，但我必须向后输入，因为在插入文本时，我的光标被重置为零位置。我尝试记录 selectionStart 的值在插入然后做之前

element.selectionStart = oldSelectionStart + 1;

但它没有用。我认为这是因为 chrome 的渲染管道，其中 JavaScript 在渲染页面之前运行，并且光标在渲染时重置，而不是在设置时......有人可以帮忙吗？我如何设法将光标保持在原来的位置？

Answer 1

element.selectionStart适用于输入元素，不适用于 contentEditable元素。您应该尝试创建 Range对象，设置其startContainer & startOffset并折叠它以将插入符号设置在所需位置。有关详细信息，请参阅 [https://developer.mozilla.org/en-US/docs/Web/API/Range]。
PS:如果您想将光标设置为“行尾”，您可以使用 range.selectNode(requiredNode) 轻松完成。和 range.collapse(true)将插入符号移动到节点的末尾，即行