Get cursor-position in contenteditable div

Question

I found the following code here on SO to get the position of the cursor of a contenteditable div, however it always returns 0.

The function that should retrieve the position:

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);

The code I use to test it:

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

I'm using Chrome (8.0.552.215) if it matters.

Solution

The function you found is for finding the caret or selection in an input or textarea, not a contenteditable element. The caret/selection boundary position can be obtained in terms of a DOM node and offset within that node using the browser's Selection object to obtain a Range. I suggest reading about these objects (the links I've provided are a good starting point). In Internet Explorer, this process is completely different but you can use my Rangy library to eliminate the differences.

Comments

[PeeHaa]

Wow I was just struggling with it yesterday night as I found out that it really didn't return the right position (I was warned by answerer though). especially when this got more complex then just one word for example :P So thank you very much for checking this already answered question en pointing me in the right direction! Gonna check it out and keep you posted.

[PeeHaa]

I've checked out your lib and it looks like that's easiest way to go considering all the 'hacks' I see in your code :P. However I have some specific questions on how I use the lib to perform the specific actions I want to use it for. Perhaps you can assist me in a way? Thanks in advance!

[Tim Down]

@PeeHaa: Sure. You can email me or post to the Google Group: groups.google.com/group/rangy