我正在为内容可编辑的 DIV 编写一个自动完成程序（需要在文本框中呈现 html 内容。因此首选使用 contenteditable DIV 而不是 TEXTAREA）。现在我需要在 DIV 中有 keyup/keydown/click 事件时找到光标位置。这样我就可以在那个位置插入 html/text。我不知道如何通过一些计算找到它，或者是否有本机浏览器功能可以帮助我在可编辑的 DIV 中找到光标位置。
如何在可编辑的 DIV 中找到光标位置？
IT技术
javascript
autocomplete
contenteditable
cursor-position
2021-03-15 05:34:42
1个回答
如果您只想在光标处插入一些内容，则无需明确查找其位置。以下函数将在所有主流桌面浏览器的光标位置插入一个 DOM 节点（元素或文本节点）：
function insertNodeAtCursor(node) {
var range, html;
if (window.getSelection && window.getSelection().getRangeAt) {
range = window.getSelection().getRangeAt(0);
range.insertNode(node);
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
html = (node.nodeType == 3) ? node.data : node.outerHTML;
range.pasteHTML(html);
}
}
如果您更愿意插入 HTML 字符串：
function insertHtmlAtCursor(html) {
var range, node;
if (window.getSelection && window.getSelection().getRangeAt) {
range = window.getSelection().getRangeAt(0);
node = range.createContextualFragment(html);
range.insertNode(node);
} else if (document.selection && document.selection.createRange) {
document.selection.createRange().pasteHTML(html);
}
}
更新
按照 OP 的评论，我建议使用我自己的Rangy库，它为 IETextRange对象添加了一个包装器，其行为类似于 DOM Range。甲DOM范围由开始和结束边界，其中的每一个中的节点的术语和该节点内的偏移被表达，和一堆用于操纵范围方法。该MDC文章应该提供一些介绍。
其它你可能感兴趣的问题