불안정한 수정 경계

Question

텍스트를 선택할 때 선택이 시작되고 끝나는 위치가 바뀌는 경우가 있습니다. 때로는 이전 요소의 끝에서 시작하고 때로는 텍스트 노드의 시작에서 시작됩니다. 나는 텍스트를 포함하는 요소의 시작 부분에서 항상 시작하고 텍스트를 포함하는 요소의 끝에서 시작하여 브라우저간에 일관되게하기 위해 이것을 정규화하려고하고있다.

<b>mouse></b><i>cat</i>

"cat"을 선택할 때 크롬은 항상 올바른 것을 수행하고 startContainer cat 및 startOffset 0을 사용하여 선택 항목을 반환합니다. Firefox 및 경우에 따라 IE8은 종종 startOffset 5를 사용하여 이전 요소 (마우스)의 끝에서 시작됩니다. 이 문제를 해결하는 내 원유 시도

이 성공되지 않았습니다 :

var sr=rangy.getSelection().getRangeAt(0); 
    var sc=sr.startContainer; 
    if(sc.nodeType!=3||sr.startOffset==sc.length) 
    { 
    sr.setStartAfter(sc); //move start to next node in range 
    } 
    rangy.getSelection().setSingleRange(sr); 
    console.log(sr.inspect()); 

나는 무엇을 놓치고?

Answer 1

좋아요. 나는 그것을 해독했다고 생각하지만, 개선 방법에 대한 의견이나 제안은 매우 열려 있습니다. 여하튼 그것은 우아함이 결여되고 나는 더 나은 방법이어야한다고 느낀다. 문제는 파이어 폭스에서 해결해야 할 것 같습니다. Chrome과 IE8은 텍스트가 포함 된 요소 외부를 선택하지 않는 것 같습니다. 어쨌든 이것은 나를 위해 효과가있는 것 같습니다. (지금까지)

var sr=rangy.getSelection().getRangeAt(0); 
var sc=sr.startContainer,ec=sr.endContainer; 
if(sc.nodeType!=3||sr.startOffset==sc.length) 
    { 
    sc=(sc.nextSibling)?sc.nextSibling:sc.parentNode.nextSibling; 
    if(sc.nodeType!=3)sc=sc.firstChild; 
    sr.setStart(sc,0); 
    } 
if(ec.nodeType!=3||sr.endOffset==0) 
    { 
    ec=(ec.previousSibling)?ec.previousSibling:ec.parentNode.previousSibling; 
    if(ec.nodeType!=3)ec=ec.lastChild; 
    sr.setEnd(ec,ec.length); 
} 
rangy.getSelection().setSingleRange(sr); 
console.log(sr.inspect());