Created
August 30, 2018 13:41
-
-
Save Joopmicroop/174f04d2f0538d1713b32f3023b03283 to your computer and use it in GitHub Desktop.
to save and restore the cursor position/selection of eg contentEditable elements after update render
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var saveSelection, restoreSelection; | |
if (window.getSelection && document.createRange) { | |
saveSelection = function(containerEl) { | |
var range = window.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 charIndex = 0, range = document.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 = window.getSelection(); | |
sel.removeAllRanges(); | |
sel.addRange(range); | |
} | |
} else if (document.selection) { | |
saveSelection = function(containerEl) { | |
var selectedTextRange = document.selection.createRange(); | |
var preSelectionTextRange = document.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 textRange = document.body.createTextRange(); | |
textRange.moveToElementText(containerEl); | |
textRange.collapse(true); | |
textRange.moveEnd("character", savedSel.end); | |
textRange.moveStart("character", savedSel.start); | |
textRange.select(); | |
}; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment