Contenteditable and caret positions

This s a demonstration of how the caret can be programatically moved between elements that are not contenteditable.

by lddubeau

HTML

<script src="http://www.timdown.co.uk/rangy/rangy-current/rangy-core.js"></script>
<p contenteditable="true">ABC <b><button contenteditable="false">A</button><button contenteditable="false">B</button>def</b> GHI</p>
<ul>
    <li>
        <button id="move1">Move caret before B</button>As of 2013/06/03 on both Firefox and Chrome, the caret won't be visible between buttons A and B.</li>
    <li>
        <button id="move2">Move caret after A</button>As of 2013/06/03 on both Firefox and Chrome, the caret won't be visible between buttons A and B.</li>
</ul>
<p contenteditable="true">ABC <b><button>A2</button><button>B2</button>def</b> GHI</p>

JavaScript

$(function () {
    rangy.init();
    $("#move1").click(function () {
        var B = $("button:contains('B')");
        var sel = rangy.getSelection();
        var range = rangy.createRange();
        range.setStartBefore(B.get(0));
        sel.setSingleRange(range);
    });

    $("#move2").click(function () {
        var A = $("button:contains('A')");
        var sel = rangy.getSelection();
        var range = rangy.createRange();
        range.setStartAfter(A.get(0));
        range.setEndAfter(A.get(0));
        sel.setSingleRange(range);
    });
});