Caret position on click and moseup

Shows some issues regarding detecting the caret position after moueup and click events.

by lddubeau

HTML

<p contenteditable="true">0123456789</p>

JavaScript

// This case shows some inconsitencies regarding caret position while
// hadling mouseup and click events on Firefox and Chrome.
// Clicking in the content editable region will output some diagosis to 
// console.
//
// On Firefox and Chrome selecting "456" will output:
//
// caret mouseup [object Text] 4
// caret click [object Text] 4
// timeout on caret mouseup [object Text] 4
// timeout on caret click [object Text] 4
//
// Then clicking so that the caret appears before 6 will output the
// following on Firefox:
//
// caret mouseup [object Text] 4
// caret click [object Text] 6
// timeout on caret mouseup [object Text] 6
// timeout on caret click [object Text] 6
//
// And the following on Chrome:
//
// caret mouseup [object Text] 4
// caret click [object Text] 4
// timeout on caret mouseup [object Text] 6
// timeout on caret click [object Text] 6
// 
// Actualy on Chrome what appears as [object Text] above is the actual
// text of the text node but that's not important.
//
// IE 10 acts like Chrome but requires a timeout of 400.

$(function () {
    function printCaret(e) {
        var range = document.getSelection().getRangeAt(0);
        console.log("caret", e.type, range.startContainer, range.startOffset);
        setTimeout(function () {
            var range = document.getSelection().getRangeAt(0);
            console.log("timeout on caret", e.type, range.startContainer, range.startOffset);
        }, 0);
    }
    
    $("p").on("mouseup", printCaret);
    $("p").on("click", printCaret);
});