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?

Can you post your `HTML`, or better yet make a JS Fiddle. Its hard to understand exactly what isnt working — Wesley Smith, Jan 21 '15 at 04:17
@DelightedD0D Okay, I created a fiddle too, http://jsfiddle.net/9wm0oeah/2/ — Alexis Wilke, Jan 21 '15 at 05:47

score 1 · Accepted Answer · edited May 23 '17 at 10:26

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

edited May 23 '17 at 10:26

Community

1
1

answered Jan 21 '15 at 10:51

Tim Down

318,141
75
454
536

It looks like the code in that other answer will indeed work as they use length, as in number of characters, of the selection. I was wondering if there would be an easy way to do that and it looks like `toString()` is enough, which is great! – Alexis Wilke Jan 21 '15 at 20:40

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

1 Answers1