javascript는 "commonAncestorContainer"의 ID를 얻습니다.

그래서 저는 여기 내 리그에서 약간 벗어난 것처럼 느낍니다. 그러나 여기에 내가하고 싶은 것이있다.javascript는 "commonAncestorContainer"의 ID를 얻습니다.

는 기본적으로, 그 단락의 id 속성의 값을 반환 (많은 elemnts (즉 <span> 및 <a>을 포함 할 수 있음) 단락에 내 텍스트의 사용자 선택 부분을 갖고 싶어. 여기에 내가 생각하는거야.

function getParaID() //function will be called using a mouseUp event 
{ 
var selObj = window.getSelection(); 
var selRange = selObj.getRangeAt(0); //btw can anyone explain what this zero means 
var paraElement = selRange.commonAncestorContainer; 
var paraID = paraElement.getAttribute; 

return paraID; 
}

당신은 어떻게 생각 나는

출처

2011-08-01 Jeff

작동합니까? 'paraID'는 아마도 당신이 원하는 것이 아닌'getAttribute' 함수에 대한 참조 일 것입니다. –

선택 범위의 commonAncestorContainer 속성은 텍스트 노드에 대한 참조, 또는 <span> 또는 <a> 요소 또는 <body> 요소, 또는 다른 무엇이든 당신이 당신의 페이지에있을 수있을 수 있습니다. 그렇다면 DOM 트리를 구성하여 포함 된 <p> 요소 (있는 경우)를 찾아야합니다. 심지어 IE < 9에서 원하는 것을 쉽게 수행 할 수 있지만 IE < 9는 window.getSelection() 또는 DOM Range를 지원하지 않음을 알아야합니다.

jsFiddle : http://jsfiddle.net/44Juf/이

코드 : 0 통과 getRangeAt()에 관해서는

function getContainingP(node) { 
    while (node) { 
     if (node.nodeType == 1 && node.tagName.toLowerCase() == "p") { 
      return node; 
     } 
     node = node.parentNode; 
    } 
} 

function getParaID() { 
    var p; 
    if (window.getSelection) { 
     var selObj = window.getSelection(); 
     if (selObj.rangeCount > 0) { 
      var selRange = selObj.getRangeAt(0); 
      p = getContainingP(selRange.commonAncestorContainer); 
     } 
    } else if (document.selection && document.selection.type != "Control") { 
     p = getContainingP(document.selection.createRange().parentElement()); 
    } 
    return p ? p.id : null; 
}

, 즉 표시되는 범위를 선택 당신이 원하는 여기에 IE 6를 포함한 모든 주요 브라우저에서 작동합니다 일부 코드는 . Firefox는 여러 개의 선택된 범위를 지원합니다 : 선택을하고 Ctrl을 누른 상태에서 다른 선택을하면 getRangeAt(0) 및 getRangeAt(1)을 통해 액세스 할 수있는 두 개의 불연속 범위가 선택되어있는 것을 확인할 수 있습니다. 또한 Firefox에서 표의 셀 열을 선택하면 각 선택된 셀에 대해 별도의 범위가 만들어집니다. 선택한 범위의 수는 선택 항목의 rangeCount 속성을 사용하여 가져올 수 있습니다. 다른 주요 브라우저는 선택된 여러 범위를 지원하지 않습니다.

출처

2011-08-01 11:49:57

당신은 아주 가까이있어 닫나요 당신이 원하는 모든 부모 요소의 id 인 경우에, 당신은 교체해야합니다 귀하의 paraElement.getAttribute 같은 paraElement.id과 :

var paraID = paraElement.id;

getRangeAt()에 대한 매개 변수는 반환 할 선택 범위의 인덱스를 지정하고 있으며 불연속 선택을 허용하는 컨트롤에만 관련이 있습니다. 예를 들어 select 상자에서 사용자는 ctrl + click을 사용하여 임의의 여러 행 그룹을 동시에 선택할 수 있습니다. 이 경우 매개 변수를 사용하여 선택한 한 영역에서 다음 영역으로 이동할 수 있습니다. 그러나 단락 내의 텍스트를 강조 표시 할 때는 절대로 불연속 선택을해서는 안되며 따라서 항상 0을 전달할 수 있습니다. 본질적으로 "첫 번째 선택된 지역"을 요구한다는 의미입니다.

인터페이스가 사용자의 선택을 여러 단락으로 확장 할 수있는 경우 commonAncestorContainer은 단락이 아닐 수도 있으며 모든 단락 태그가 포함 된 요소 일 수도 있습니다. 그래서 당신은 그 사건을 처리 할 준비가되어 있어야합니다.

편집 :에서 (이 코드는 mouseDown 및 각 단락에 mouseUp 리스너를 적용하는 대신 commonAncestorContainer에 의존, http://jsfiddle.net/vCsZH/

기본적으로 :

이와 조금 연주 후, 여기 내 제안이다 최상위 컨테이너에 이미 적용된 것 이외에). 청취자는 본질적으로 선택 범위가 시작되고 끝나는 단락을 기록하므로 어느 단락이 선택되었는지 훨씬 쉽게 확인 할 수 있습니다.

jQuery와 같은 프레임 워크를 통해 동적 이벤트 바인딩을 사용하는 경우가있었습니다.

출처

2011-08-01 10:50:02 aroth

'getRangeAt()'설명으로 약간 벗어났습니다. 'window.getSelection()'은 폼 요소가 아닌 일반 웹 페이지 내용 내에서의 사용자 선택에만 사용할 수 있습니다. 특히 '

javascript는 "commonAncestorContainer"의 ID를 얻습니다.

답변