Chrome/Safari에서 contenteditable div의 커서를 다음 요소로 이동하려면 어떻게해야하나요?

Question

contenteditable div에 태그를 삽입하는 논리가 있습니다. 삽입 후 다음 요소의 시작 부분에 커서를 설정하려고합니다. 이 코드는 다음과 같습니다.

function insertNodeAtCaret(node) { 
if(typeof window.getSelection !== 'undefined') 
{ 
    var sel = window.getSelection(); 
    if(sel.rangeCount) 
    { 
     var rng = sel.getRangeAt(0); 
     rng.collapse(false); 
     rng.insertNode(node); 

     // The following doesn't work in Chrome or Safari 
     node = node.nextSibling; 
     rng.setEndAfter(node); 
     rng.setStartAfter(node); 
     rng.collapse(true); 
     sel.removeAllRanges(); 
     sel.addRange(rng); 
    } 
} 
else if (typeof document.selection !== 'undefined' && document.selection.type !== 'Control') 
{ 
    document.selection.createRange().pasteHTML(node.outerHTML); 
} 
} 

IE, Opera 및 Firefox에서는 완벽하게 작동하지만 Chrome과 Safari에서는 작동하지 않습니다. Chrome/Safari에서 커서는 스팬이 아닌 스팬 내의 텍스트 끝에 배치됩니다.

<span>text</span>CURSOR HERE 

감사합니다 :이다 즉

대신에 내가 걸려 무엇

<span>text CURSOR HERE</span> 

.

Answer 1

이것은 long-standing and annoying bug in WebKit입니다. 더 많은 활동이있는 the bug for the special case of placing the caret inside an empty inline element을 참조하십시오. 단일 너비가 아닌 공백 문자를 삽입하고 선택하는 것이 허용 될 수 없다면 할 수있는 일이 많지 않습니다.