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

Question

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

Я пишу, autocompleter для содержания доступный для редактирования DIV (должен представить содержимое HTML в текстовом поле. Так предпочтенный для использования contenteditable DIV по ТЕКСТОВОЙ ОБЛАСТИ). Теперь я должен найти позицию курсора, когда существует keyup/keydown/click событие в DIV. Так, чтобы я мог вставить HTML/текст в том положении. Я невежествен, как я могу найти его некоторым вычислением или являюсь там собственной функциональностью браузера, которая помогла бы мне найти позицию курсора в contententeditable DIV.

17

javascript autocomplete contenteditable cursor-position

задан Sharief Shaik 6 February 2010 в 14:19

1 ответ

Другие вопросы по тегам:

javascript autocomplete contenteditable cursor-position

Похожие вопросы:

score 33 · 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. Диапазон DOM состоит из начальной и конечной границ, каждая из которых выражается в терминах узла и смещения внутри этого узла, а также набора методов для управления диапазоном. Статья MDC должна содержать некоторое введение.