Javascript Set Caret in ContentEditable Div

Question

I have a div tag that is contenteditable so that users can type in the div. There is a function that adds a link into the div when the user presses a button. I would like the caret to be positioned after the link so that users can continue to type. The link can be inserted many times.

Example Code:

<div id="mydiv" contenteditable="true" tabindex="-1">before <a href="#">link</a> after</div>

I require this code to work in: IE, Firefox, Opera, Safari and Chrome.

Can anyone offer any help?

Answer 1

Assuming you have a reference to the <a> element you've inserted in a variable called link:

function setCaretAfter(el) {
    var sel, range;
    if (window.getSelection && document.createRange) {
        range = document.createRange();
        range.setStartAfter(el);
        range.collapse(true);
        sel = window.getSelection(); 
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(el);
        range.collapse(false);
        range.select();
    }
}

setCaretAfter(link);