Я пишу автозапуск для контента, редактируемого DIV (нужно отображать html-содержимое в текстовом поле. Поэтому предпочитаете использовать контент-доступный DIV над TEXTAREA). Теперь мне нужно найти позицию курсора, когда в DIV есть событие keyup/keydown/click. Так что я могу вставить html/текст в эту позицию. Я не знаю, как я могу найти его по некоторым вычислениям или есть встроенная функция браузера, которая поможет мне найти позицию курсора в контентной DIV.
Как найти позицию курсора в контентной DIV?
Ответ 1
Если все, что вы хотите сделать, это вставить некоторый контент в курсор, нет необходимости явно находить его позицию. Следующая функция будет вставлять DOM node (элемент или текст node) в позицию курсора во всех браузерах рабочего стола:
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
Следуя комментариям OP, я предлагаю использовать свою собственную библиотеку Rangy, которая добавляет оболочку в объект IE TextRange, который ведет себя как диапазон DOM. A DOM Range состоит из границы начала и конца, каждая из которых выражается в терминах node и смещения внутри этого node, и множество методов для управления диапазоном. статья MDC должна содержать некоторые сведения.