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; 
     } 

의 contentEditable 선언 :

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