如何在内容可编辑的 DIV 中找到光标位置？答案

【问题标题】：How to find cursor position in a contenteditable DIV?如何在内容可编辑的 DIV 中找到光标位置？
【发布时间】：2011-01-13 21:03:45
【问题描述】：

我正在为内容可编辑的 DIV 编写一个自动完成器（需要在文本框中呈现 html 内容。因此首选使用 contenteditable DIV 而不是 TEXTAREA）。现在我需要在 DIV 中有 keyup/keydown/click 事件时找到光标位置。这样我就可以在该位置插入 html/文本。我不知道如何通过一些计算找到它，或者是否有本机浏览器功能可以帮助我在内容可编辑的 DIV 中找到光标位置。

【问题讨论】：

光标位置还是插入符号位置？所以实际上你需要通过坐标找到插入符号的位置？

标签： javascript autocomplete contenteditable cursor-position

【解决方案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 的 cmets，我建议使用我自己的 Rangy 库，它为 IE TextRange 对象添加了一个包装器，其行为类似于 DOM 范围。 DOM Range 包含一个开始和结束边界，每个边界都用一个节点和该节点内的偏移量表示，以及一系列用于操作范围的方法。 MDC article 应该提供一些介绍。

【讨论】：

@Tim，感谢您的回复。当我需要在当前光标位置插入时，这有效。可能我的意思是能够将光标设置在特定位置并插入那里。假设我知道当前光标位置，并且想要在我从自动完成下拉菜单中单击时返回几个位置并插入 html。（我是在谈论寻找位置并插入 DOM 吗？）