时间戳

首页 > 解决方案 > 在 contenteditable div 中更改 innerHTML 时保留光标位置

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

问题描述

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

element.selectionStart = oldSelectionStart + 1;

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

标签： javascripthtmldom

解决方案

element.selectionStart适用于输入元素，不适用于contentEditable元素。您应该尝试创建一个Range对象，设置其startContainer&startOffset并折叠它以在所需位置设置插入符号。有关详细信息，请参阅 [https://developer.mozilla.org/en-US/docs/Web/API/Range]。

PS：如果您想将光标设置为“行尾”，您可以轻松地range.selectNode(requiredNode)将range.collapse(true)插入符号移动到节点的末尾，即行

推荐阅读