Caret movement between two adjacent editable elements.

Shows inconsistency between Firefox and Chrome.

by lddubeau

HTML

<p contenteditable="true">foo <b>bar</b></p>
<button id="move">Move To Start</button>
<button id="end">Move to End</button>
<button id="location">Location</button>
<button id="end_of_foo">End of Foo</button>

JavaScript

$(function () {
    $("#move").click(function () {
        var sel = document.getSelection();
        sel.removeAllRanges();
        var r = document.createRange();
        r.setStart($("p").get(0), 0);
        sel.addRange(r);
        return false;
    });
    
    $("#end").click(function () {
        var sel = document.getSelection();
        sel.removeAllRanges();
        var r = document.createRange();
        r.setStart($("p").get(0), 2);
        sel.addRange(r);
        return false;
    });
    
    $("#end_of_foo").click(function () {
        var text = $("p").first().get(0).childNodes[0];
        var r = document.createRange();
        r.setStart(text, text.nodeValue.length);
        var sel = document.getSelection();
        sel.removeAllRanges();
        sel.addRange(r);
        return false;
    });


    $("#location").click(function () {
        var r = document.getSelection().getRangeAt(0);
        $("body").append("<p>startNode: " + r.startContainer.nodeValue + " offset: " + r.startOffset + "</p>");
    });

    $("button").mousedown(false);
    $("button").mouseup(false);

});