contenteditable：保存和恢復插入符的位置

Question

下面的功能使插入符號移回到起點。 調用函數后，如何使它停留在同一位置？

function highlightText() {
            var mystring = document.getElementById("writeArea").textContent;
            mystring = mystring.replace(/function/g , "<span class=\"func\">function</span>");
            document.getElementById("writeArea").innerHTML = mystring;
        }

可編輯的聲明：

<div class="codeArea" id="writeArea" contenteditable="true"> <p> edit me! </p> </div>

Answer 1

使用selectionStart獲取並設置插入符號的位置：

 document.getElementById("writeArea").onkeyup = highlightText(this); function highlightText(o) { var mystring = document.getElementById("writeArea").textContent, caretPosition = o.selectionStart; mystring = mystring.replace(/function/g , "<span class=\\"func\\">function</span>"); document.getElementById("writeArea").innerHTML = mystring; document.getElementById("writeArea").selectionStart = caretPosition; } 

 <div class="codeArea" id="writeArea" contenteditable="true"> <p> edit me! </p> </div>