HTML 콘텐츠가 포함 된 contentEditable 영역에서 캐럿 (커서) 위치 가져 오기

HTML 콘텐츠가 포함 된 contentEditable 영역에서 캐럿 (커서) 위치 가져 오기

---

contentEditable 요소 (p, div, ... 일 수 있음)가 있고 그 안에 캐럿 (커서) 위치를 얻고 싶습니다. 나는 일반적으로 다음 코드로 그것을 달성 할 수있다.

var position = window.getSelection().getRangeAt(0).startOffset;

요소에 텍스트 만 포함되어있는 동안 제대로 작동합니다. 그러나 요소에 일부 HTML 형식이 포함 된 경우 반환 된 위치는 포함 된 HTML 요소 내의 캐럿 위치에 상대적입니다.

contentEditable 요소의 내용이 다음과 같다고 가정 해 보겠습니다.

AB<b>CD</b>EF

caret가 inside <b></b>이면 C와 D 사이에 있다고 가정하면 위 코드에서 반환되는 위치는 3이 아닌 1입니다 (contentEditable 요소의 내용 시작부터 계산).

아무도 이것에 대한 해결책을 찾을 수 있습니까?

---

최신 정보

IE <9에서도 작동하는 더 간단한 버전을 작성했습니다.

https://stackoverflow.com/a/4812022/96100

이전 답변

이것은 실제로 전체 문서의 텍스트 내의 문자 오프셋보다 더 유용한 결과 startOffset입니다. DOM 범위 의 속성 ( window.getSelection().getRangeAt()반환되는 항목)은 startContainer속성에 상대적인 오프셋입니다 (항상 텍스트 노드 일 필요는 없습니다. 방법). 그러나 실제로 문자 오프셋을 원할 경우이를 수행하는 함수가 있습니다.

다음은 실제 예입니다. http://jsfiddle.net/timdown/2YcaX/

기능은 다음과 같습니다.

function getCharacterOffsetWithin(range, node) {
    var treeWalker = document.createTreeWalker(
        node,
        NodeFilter.SHOW_TEXT,
        function(node) {
            var nodeRange = document.createRange();
            nodeRange.selectNode(node);
            return nodeRange.compareBoundaryPoints(Range.END_TO_END, range) < 1 ?
                NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
        },
        false
    );

    var charCount = 0;
    while (treeWalker.nextNode()) {
        charCount += treeWalker.currentNode.length;
    }
    if (range.startContainer.nodeType == 3) {
        charCount += range.startOffset;
    }
    return charCount;
}

---

이것은 매우 오래된 게시물이지만 여전히 Google에서 검색하는 첫 번째 결과 중 하나이므로 여전히 유용 할 수 있습니다. 이것은 html 태그와 줄 바꿈을 고려하여 올바른 위치를 얻는 데 효과적입니다 (Firefox에서 테스트 됨).

function getCaretPosition (node) {
    var range = window.getSelection().getRangeAt(0),
        preCaretRange = range.cloneRange(),
        caretPosition,
        tmp = document.createElement("div");

    preCaretRange.selectNodeContents(node);
    preCaretRange.setEnd(range.endContainer, range.endOffset);
    tmp.appendChild(preCaretRange.cloneContents());
    caretPosition = tmp.innerHTML.length;
    return caretPosition;
}

실제 html을 얻기 위해 cloneContents 기능을 사용하고 html 길이를 얻기 위해 임시 div에 documentfragment를 추가합니다.

---

If you want to insert element then you could try to do something like this:

// Get range
var range = document.caretRangeFromPoint(event.clientX, event.clientY);
if (range)
  range.insertNode(elementWhichYouWantToAddToContentEditable);

ReferenceURL : https://stackoverflow.com/questions/4767848/get-caret-cursor-position-in-contenteditable-area-containing-html-content