Incorrect caret position when nesting elements in a content editable div

Question

I am currently working on a project where after clicking a button a div gets inserted into a content editable div at the caret position.

I have the general mechanism working, however in chrome (I haven't tested another browser yet) after I insert the new div and click off the content editable area and click back on the area to add more text the cursor aligns to the right hand side of the content editable area.

If I continue to type while the cursor is over there the text will be next to the div as expected, and deletes properly when backspace is pressed.

Here is my javascript:

createVar = function () {
    var variable = document.createElement('div'),
    nested   = document.createElement('div');

    variable.className = 'msg_var';
    variable.spellcheck = false;
    variable.contentEditable = false;

    nested.className = "msg_var_content";
    nested.innerHTML = "foobar";

    variable.appendChild(nested);
    nested = document.createElement('div');
    nested.className = 'msg_var_remove';
    nested.innerHTML = 'x';
    variable.appendChild(nested);
    nested.setAttribute(
        'onclick',
        'this.parentNode.parentNode.removeChild(this.parentNode);'
    );
    return variable;
}

addVar = function () {
    var body     = document.getElementById('body'),
        variable = createVar(),
        range,
        sel;

    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            range.insertNode(variable);

            range = range.cloneRange();
            range.selectNodeContents(variable);
            range.collapse(false);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } 
}

I have created a jsfiddle to help describe my situation: http://jsfiddle.net/6XAfv/3/

Does anyone know why the cursor gets moved when I insert a div? How do I keep the cursor next to the div?

Answer 1

This is a bug in google chrome and safari. In firefox it's working properly. I spend a while figuring out how to fix it.

My solution is, that you need to wrap contenteditable to another wrapper. So caret will be at the end of the inner contenteditable.

<div id="body">
    <div id="editable" contenteditable="true">
        <span>&nbsp</span>
    </div>
</div>

We need to have &nbsp inside so we can focus the inner content.

Firstly, check whether the browser is Chrome or Safari, if so add styling.

is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
is_safari = navigator.userAgent.indexOf("Safari") > -1;
if(is_chrome && is_safari) is_safari = false;
    if(is_chrome || is_safari){
         var element = document.getElementById('element');
         element.style.display = 'inline-block';
         element.style.width = 'auto';
    }

Then all you need to do is, focus contenteditable and set caret at the end of text.

contentFocus = function(){
    setTimeout(function(){
        document.getElementById('editable').focus(); 
    }, 100);
}  

here i edited your example http://jsfiddle.net/6XAfv/4/ it's not working perfectly, but you can get it to work easy with focus fixes.

Hope this helps.