After performing a regular expression, which is basically just removing HTML elements inside my editable div, my caret position gets lost after I perform a innerHTML. Even thou I am saving the last position of the edit, I cannot restore my caret somehow. All ideas are highly appreciated!
Here is my full code:
<html>
<head>
<script>
var lastPos = 0;
function getCaretCharacterOffsetWithin(element) {
var caretOffset = 0;
if (typeof window.getSelection != "undefined") {
var range = window.getSelection().getRangeAt(0);
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
caretOffset = preCaretRange.toString().length;
} else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
var textRange = document.selection.createRange();
var preCaretTextRange = document.body.createTextRange();
preCaretTextRange.moveToElementText(element);
preCaretTextRange.setEndPoint("EndToEnd", textRange);
caretOffset = preCaretTextRange.text.length;
}
return caretOffset;
}
function showOldCaretPos() {
console.log(lastPos);
}
function showCaretPos() {
var el = document.getElementById("test");
var caretPosEl = document.getElementById("caretPos");
lastPos = getCaretCharacterOffsetWithin(el);
caretPosEl.innerHTML = "Caret position: " + lastPos;
}
window.onload=function(){
document.body.onkeydown = showOldCaretPos;
document.body.onmousedown = showOldCaretPos;
document.body.onkeyup = showCaretPos;
document.body.onmouseup = showCaretPos;
};
function testFun(ele){
var input = ele.innerHTML.replace(/<(.*?)>/g,"");
var output = input;
ele.innerHTML = output;
}
</script>
</head>
<body>
<div id="test" contenteditable="true" onKeyUp="testFun(this);"><font color="red">something</font>something<font color="blue">something</font></div>
<div id="caretPos"></div>
</body>
</html>