contenteditable DIV에서 커서 위치를 찾는 방법은 무엇입니까?

Question

콘텐츠 편집 가능한 DIV (텍스트 상자에 HTML 콘텐츠를 렌더링해야하므로 TEXTAREA에서 contenteditable DIV를 사용하는 것이 좋습니다)에 대한 자동 완성 기능을 작성하고 있습니다. 이제는 DIV에 keyup/keydown/click 이벤트가있을 때 커서 위치를 찾아야합니다. 그래서 그 위치에 HTML/텍스트를 삽입 할 수 있습니다. 나는 계산에 의해 그것을 찾을 수있는 방법을 알지 못한다. 또는 컨텐트 허용 DIV에서 커서 위치를 찾는데 도움이되는 네이티브 브라우저 기능이있다.

Answer 1

커서로 내용을 삽입하려는 경우 위치를 명시 적으로 찾을 필요가 없습니다. 다음 함수는 모든 메인 스트림 데스크탑 브라우저에서 커서의 위치에 DOM 노드 (요소 또는 텍스트 노드)를 삽입합니다 :

function insertNodeAtCursor(node) { 
    var range, html; 
    if (window.getSelection && window.getSelection().getRangeAt) { 
     range = window.getSelection().getRangeAt(0); 
     range.insertNode(node); 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     html = (node.nodeType == 3) ? node.data : node.outerHTML; 
     range.pasteHTML(html); 
    } 
} 

오히려 HTML 문자열 삽입 할 경우

function insertHtmlAtCursor(html) { 
    var range, node; 
    if (window.getSelection && window.getSelection().getRangeAt) { 
     range = window.getSelection().getRangeAt(0); 
     node = range.createContextualFragment(html); 
     range.insertNode(node); 
    } else if (document.selection && document.selection.createRange) { 
     document.selection.createRange().pasteHTML(html); 
    } 
} 

UPDATE를

영업의 의견에 따라, 나는 IE에 DOM 범위처럼 동작 TextRange 개체를 래퍼를 추가 내 자신의 Rangy 라이브러리를 사용하는 것이 좋습니다. DOM Range은 시작과 끝 경계로 구성되며, 각 경계는 노드와 그 노드 내의 오프셋으로 표현되며 범위를 조작하기위한 여러 방법이 있습니다. MDC article은 몇 가지 소개를 제공해야합니다.