javascript - Contenteditable Div - 根据 innerHTML 位置的光标位置

标签 javascript contenteditable cursor-position

我已经完成了我的研究并在 StackOverflow 上遇到了这些问题,人们问了同样的问题,但问题是他们想要根据 x 和 y 坐标或从左边开始的列来获得位置。我想知道光标相对于 div 的 innerHTML 的位置。

例如:

innerHTML = "This is the innerHTML of the <b>div</b> and bla bla bla..."
                                                        ^
                                                  Cursor is here

所以我想要的结果是 44。该怎么做?

最佳答案

var target = document.createTextNode("\u0001");
document.getSelection().getRangeAt(0).insertNode(target);
var position = contentEditableDiv.innerHTML.indexOf("\u0001");
target.parentNode.removeChild(target);

这会临时插入一个包含不可打印字符 (\u0001) 的虚拟文本节点,然后在 div 中找到该字符的索引>innerHTML.

在大多数情况下,这会使 DOM 和当前选择保持不变,但可能会产生一个较小的副作用:如果光标位于单个文本节点的文本中间,该节点将被分成两个连续的文本节点.通常这应该是无害的,但在您的特定应用程序的上下文中请记住这一点。

更新:事实证明,您可以使用 Node.normalize() 合并连续的文本节点。 .

关于javascript - Contenteditable Div - 根据 innerHTML 位置的光标位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29257428/

相关文章:

javascript - 如何在本地托管 popper.js

javascript - 设置无法删除的默认文本框值

javascript - 更改内容可编辑元素的 innerHTML 后将插入符放回原处

javascript - 命令值的事件监听器

javascript - 如何从服务器获取嵌套路由 ember 2.3.0 的数据

html - 强制光标 :pointer for link in a div with contenteditable attribute in IE

javascript - 在 CKEditor 中仅添加一次 HTML 元素

c# - 在Windows窗体中如何检查光标位置是否超出图表控制范围?

c# - GetChildAtPoint 方法返回错误的控件

javascript - javascript上的多线程捕获子线程的响应