Is there a way to not lose focus selection when replacing HTML with text in a contenteditable div?

Question

I have a div tag that I make editable.

I do not want any HTML in that tag so I do not let users enter any. However, when the user does a copy / paste, it is not unlikely to include tags.

I have some jQuery code to capture the paste event and just in case I tried using my saveSelection() and restoreSelection() functions which I show below which work find in many situations but here they fail...

Fiddle: http://jsfiddle.net/9wm0oeah/2/

jQuery("#that_div").on("paste", function()
    {
        setTimeout(function()
            {
                // remove any HTML
                var selection = saveSelection();
                jQuery("#that_div").text(jQuery("#that_div").text());
                restoreSelection(selection);
            }, 0);
    });


function saveSelection()
{
    var sel;

    if(document.selection)
    {
        return document.selection.createRange();
    }
    else
    {
        sel = window.getSelection();
        if(sel.getRangeAt && sel.rangeCount > 0)
        {
            return sel.getRangeAt(0);
        }
        else
        {
            return null;
        }
    }
    //NOTREACHED
}

function restoreSelection(range)
{
    var sel;

    if(document.selection)
    {
        range.select();
    }
    else
    {
        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange((range));
    }
}

Do you have any idea why it fails?

Answer 1

When you change the DOM nodes inside your editable div, any range exists within or partially within that div has to change to accommodate the changes. If you completely replace the content, as your code does, the nodes that the range's boundaries were relative to are destroyed and the range has to revert to a default state.

You could use a character offset-based solution instead. For example: Can't restore selection after HTML modify, even if it's the same HTML