Получаване на позиция на курсора в contenteditable div

Намерих следния код тук на SO, за да получа позицията на курсора на 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), ако има значение.


person PeeHaa    schedule 07.12.2010    source източник


Отговори (1)


Функцията, която намерихте, е за намиране на каретката или селекцията във входно или текстово поле, а не елемент с възможност за редактиране на съдържание. Позицията на границата на каретка/селекция може да бъде получена от гледна точка на DOM възел и отместване в рамките на този възел с помощта на Selection на браузъра обект за получаване на Range. Предлагам да прочетете за тези обекти (връзките, които предоставих, са добра отправна точка). В Internet Explorer този процес е напълно различен, но можете да използвате моята библиотека Rangy, за да премахнете разликите.

person Tim Down    schedule 10.12.2010
comment
Уау, просто се борех с него вчера вечерта, когато разбрах, че наистина не е върнал правилната позиция (все пак бях предупреден от отговорника). особено когато това стане по-сложно от само една дума например :P Така че много ви благодаря, че проверихте този вече отговорен въпрос и ме насочихте в правилната посока! Ще го проверя и ще ви държа в течение. - person PeeHaa; 10.12.2010
comment
Проверих вашата библиотека и изглежда, че това е най-лесният начин, като се имат предвид всички „хакове“, които виждам в кода ви :P. Имам обаче някои конкретни въпроси относно това как използвам lib, за да изпълнявам конкретните действия, за които искам да го използвам. Може би можете да ми помогнете по някакъв начин? Благодаря предварително! - person PeeHaa; 10.12.2010
comment
@PeeHaa: Разбира се. Можете да ми изпратите имейл или да публикувате в групата на Google: groups.google.com/group/rangy - person Tim Down; 11.12.2010