Получить позицию курсора в contenteditable div

Я нашел следующий код здесь, на SO, чтобы получить позицию курсора contenteditable div, однако он всегда возвращает 0.

Функция, которая должна получить позицию:

new function($) {
    $.fn.getCursorPosition = function() {
        var pos = 0;
        var input = $(this).get(0);
        // IE Support
        if (document.selection) {
            input.focus();
            var sel = document.selection.createRange();
            var selLen = document.selection.createRange().text.length;
            sel.moveStart('character', -input.value.length);
            pos = sel.text.length - selLen;
        }
        // Firefox support
        else if (input.selectionStart || input.selectionStart == '0')
            pos = input.selectionStart;

        return pos;
    }
} (jQuery);

Код, который я использую для проверки:

$('div.MESSAGE_OF_DAY').keyup(function() {
  alert($(this).getCursorPosition()); // always returns 0???
});

Я использую Chrome (8.0.552.215), если это имеет значение.


html jquery contenteditable cursor-position caret
person PeeHaa    schedule 07.12.2010    source источник

Ответы (1)


arrow_upward
8
arrow_downward

Найденная вами функция предназначена для поиска курсора или выбора во входной или текстовой области, а не в элементе, доступном для редактирования. Положение границы вставки/выделения можно получить с точки зрения узла DOM и смещения внутри этого узла с помощью Selection браузера. объект для получения Range. Я предлагаю прочитать об этих объектах (ссылки, которые я предоставил, являются хорошей отправной точкой). В Internet Explorer этот процесс совершенно другой, но вы можете использовать мою библиотеку Rangy, чтобы устранить различия.

person Tim Down    schedule 10.12.2010
comment
Вау, я просто боролся с этим вчера вечером, когда обнаружил, что он действительно не возвращает правильную позицию (хотя ответчик предупредил меня). особенно когда это стало более сложным, чем, например, одно слово: P Так что большое спасибо за проверку этого уже отвеченного вопроса и указание меня в правильном направлении! Собираюсь проверить это и держать вас в курсе. - person PeeHaa; 10.12.2010
comment
Я проверил вашу библиотеку, и похоже, что это самый простой способ, учитывая все «хаки», которые я вижу в вашем коде: P. Однако у меня есть некоторые конкретные вопросы о том, как я использую библиотеку для выполнения определенных действий, для которых я хочу ее использовать. Может быть, вы можете мне как-то помочь? Заранее спасибо! - person PeeHaa; 10.12.2010
comment
@PeeHaa: Конечно. Вы можете написать мне по электронной почте или опубликовать сообщение в группе Google: groups.google.com/group/rangy - person Tim Down; 11.12.2010