중첩 노드 자바 스크립트의 캐럿 색인

Question

중첩 된 노드가있는 편집 가능한 div 내부에서 캐럿의 선택 색인을 찾으려고합니다.

<div contenteditable="true">1234<span>5678|9</span></div> //Returns 4 

내가 사업부의 모든 문자의 인덱스를 원하므로 위의 예는 반환해야 8

이 내가 사용하고 무엇인가 : |

예 (커서입니다) 그 순간.

var sel = window.getSelection(); 
    return sel.anchorOffset; 

내가 commonAncestor 및 기타 선택 & 다양한 방법을 사용하여 시도,하지만이를 찾는 방법을 확실입니다.

Answer 1

트래버스! (http://snipplr.com/view/ Here’s a demo.

function getSelectionOffsetFrom(parent) { 
    var sel = window.getSelection(); 
    var current = sel.anchorNode; 
    var offset = sel.anchorOffset; 

    while(current && current !== parent) { 
     var sibling = current; 

     while(sibling = sibling.previousSibling) { 
      if(sibling.nodeType === 3) { 
       offset += sibling.nodeValue.length; 
      } else if(sibling.nodeType === 1) { 
       offset += getContentLength(sibling); 
      } 
     } 

     current = current.parentNode; 
    } 

    if(!current) { 
     return null; 
    } 

    return offset; 
} 

function getContentLength(element) { 
    var stack = [element]; 
    var total = 0; 
    var current; 

    while(current = stack.pop()) { 
     for(var i = 0; i < current.childNodes.length; i++) { 
      if(current.childNodes[i].nodeType === 1) { 
       stack.push(current.childNodes[i]); 
      } else if(current.childNodes[i].nodeType === 3) { 
       total += current.childNodes[i].nodeValue.length; 
      } 
     } 
    } 

    return total; 
}