Как найти позицию курсора в приемлемом DIV?

Question

Я пишу автозаполнение для редактируемого содержимого DIV (необходимо отображать HTML-контент в текстовом поле. Поэтому предпочтительнее использовать contenteditable DIV, а не TEXTAREA). Теперь мне нужно найти позицию курсора, когда в DIV есть событие keyup / keydown / click. Так что я могу вставить HTML / текст в этой позиции. Я не знаю, как найти его с помощью некоторых вычислений или есть встроенная функция браузера, которая поможет мне найти позицию курсора в приемлемом 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);
    }
}

UPDATE

После комментариев ОП я предлагаю использовать собственную библиотеку Rangy , которая добавляет оболочку к объекту IE TextRange, который ведет себя как DOM Range. DOM Range состоит из начальной и конечной границ, каждая из которых выражается в виде узла и смещения в этом узле, и набора методов для манипулирования Range. Статья MDC должна дать некоторое представление.