Cannot restore selection after changing HTML, even if it is the same HTML

Question

I am trying to save the selection of the contentEditable element and restore it later.

I want to observe the paste event and store the HTML as it was before, clear the html, and then manually insert the embedded text with some changes in the selected position.

Take a look at this example: jsfiddle.net/gEhjZ

When you select part of the text, click store , delete the selection again and click restore , it works as expected.

But when you first click store , then replace the HTML with the same HTML by clicking overwrite html and then try restore , nothing will happen.

I thought using .cloneRange() would make a difference, but it wouldn't. Even a deep copy of the object ( $.extend(true, {}, oldRange) ) will not do the trick. As soon as I rewrite HTML, the sel select object also changes. It makes sense to me that changing the selection context will destroy the range, but I'm trying to restore it to the same HTML.

I know I can use rangy , but I really don't want to use a huge library just for this little function. What am I missing? Any help would be greatly appreciated!

Note: only Firefox / Chrome, so no cross browsers are required.

Update:

The @Tim Down answer works when using a div, but I actually use an iframe. When I did this example, I thought it didn't make any difference.

Now, when I try to restore the iframe body, I get the following error: TypeError: Value does not implement interface Node. in the next line preSelectionRange.selectNodeContents(containerEl); . I did not get much from googling. I tried to wrap the contents of the body and restore the html wrap, but I get the same error.

jsfiddle does not work in this case, because it uses iframes to display the results themselves, so I will give an example here: snipt.org/AJad3

And the same without a wrapper: snipt.org/AJaf0

Update 2: I decided that I should use editable.get(0) , of course. But now the start and end of the iframe selection are 0. see snipt.org/AJah2

Answer 1

You can save and restore the character position using the following functions:

stack overflow

I adapted this function a bit to work inside the iframe element.

Demo: http://jsfiddle.net/timdown/gEhjZ/4/

the code:

 var saveSelection, restoreSelection; if (window.getSelection && document.createRange) { saveSelection = function(containerEl) { var doc = containerEl.ownerDocument, win = doc.defaultView; var range = win.getSelection().getRangeAt(0); var preSelectionRange = range.cloneRange(); preSelectionRange.selectNodeContents(containerEl); preSelectionRange.setEnd(range.startContainer, range.startOffset); var start = preSelectionRange.toString().length; return { start: start, end: start + range.toString().length }; }; restoreSelection = function(containerEl, savedSel) { var doc = containerEl.ownerDocument, win = doc.defaultView; var charIndex = 0, range = doc.createRange(); range.setStart(containerEl, 0); range.collapse(true); var nodeStack = [containerEl], node, foundStart = false, stop = false; while (!stop && (node = nodeStack.pop())) { if (node.nodeType == 3) { var nextCharIndex = charIndex + node.length; if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) { range.setStart(node, savedSel.start - charIndex); foundStart = true; } if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) { range.setEnd(node, savedSel.end - charIndex); stop = true; } charIndex = nextCharIndex; } else { var i = node.childNodes.length; while (i--) { nodeStack.push(node.childNodes[i]); } } } var sel = win.getSelection(); sel.removeAllRanges(); sel.addRange(range); }; } else if (document.selection) { saveSelection = function(containerEl) { var doc = containerEl.ownerDocument, win = doc.defaultView || doc.parentWindow; var selectedTextRange = doc.selection.createRange(); var preSelectionTextRange = doc.body.createTextRange(); preSelectionTextRange.moveToElementText(containerEl); preSelectionTextRange.setEndPoint("EndToStart", selectedTextRange); var start = preSelectionTextRange.text.length; return { start: start, end: start + selectedTextRange.text.length }; }; restoreSelection = function(containerEl, savedSel) { var doc = containerEl.ownerDocument, win = doc.defaultView || doc.parentWindow; var textRange = doc.body.createTextRange(); textRange.moveToElementText(containerEl); textRange.collapse(true); textRange.moveEnd("character", savedSel.end); textRange.moveStart("character", savedSel.start); textRange.select(); }; }