在contenteditable div中获取光标位置

时间:2010-12-07 20:23:47

标签: jquery html contenteditable caret cursor-position

我在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)。

1 个答案:

答案 0 :(得分:8)

您找到的功能是在输入或文本区域中查找插入符号或选择,而不是在可疑元素中查找。可以使用浏览器的Selection对象在该节点内根据DOM节点和偏移获得插入符/选择边界位置以获得Range。我建议阅读这些对象(我提供的链接是一个很好的起点)。在Internet Explorer中,此过程完全不同,但您可以使用我的Rangy库来消除差异。