0

执行正则表达式后，基本上只是删除可编辑 div 中的 HTML 元素，执行 innerHTML 后插入符号位置丢失。即使你保存了编辑的最后一个位置，我也无法以某种方式恢复我的插入符号。所有的想法都受到高度赞赏！

这是我的完整代码：

<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>
4

0 回答 0