如何在可編輯的 DIV 中找到光標位置？

Question

我正在為內容可編輯的 DIV 編寫一個自動完成程序（需要在文本框中呈現 html 內容。因此首選使用 contenteditable DIV 而不是 TEXTAREA）。 現在我需要在 DIV 中有 keyup/keydown/click 事件時找到光標位置。 這樣我就可以在那個位置插入 html/text。 我不知道如何通過一些計算找到它，或者是否有本機瀏覽器功能可以幫助我在可編輯的 DIV 中找到光標位置。

Answer 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庫，它為 IE TextRange對象添加了一個包裝器，其行為類似於 DOM Range。 DOM Range由開始和結束邊界組成，每個邊界都用一個節點和該節點內的偏移量表示，以及一系列操作 Range 的方法。 MDC 文章應該提供一些介紹。

Answer 2

它的代碼非常好;），但還有一點要問-當我在文本中插入icon（image）時，是否可以在插入圖像后移動光標，現在光標停留在插入圖像之前。 這將非常有幫助，我正在嘗試將回復窗口放在一起，以便用戶鍵入文本並插入情感圖標，在此先感謝您，勝利者