범위 선택 및 모질라

파이어 폭스가 범위를 선택하도록 지정하고 싶습니다. IE에서 range.select();를 사용하여 쉽게이 작업을 수행 할 수 있습니다. FFX는 dom 요소를 대신 기대합니다. 내가 잘못 했습니까? 아니면 이것에 대해 더 좋은 방법이 있습니까?범위 선택 및 모질라

먼저 텍스트 선택을 가져 와서 범위로 변환하고 (생각하십니까?) 텍스트 선택을 저장합니다. 이것은 처음부터 범위를 얻는 곳입니다 :

// Before modifying selection, save it 
    var userSelection,selectedText = ''; 
    if(window.getSelection){ 
     userSelection=window.getSelection(); 
    } 
    else if(document.selection){ 
     userSelection=document.selection.createRange(); 
    } 
    selectedText=userSelection; 
    if(userSelection.text){ 
     selectedText=userSelection.text;   
    } 
    if(/msie|MSIE/.test(navigator.userAgent) == false){ 
     selectedText=selectedText.toString(); 
    } 
    origRange = userSelection;

나중에 선택 사항을 변경합니다 (성공적으로). IE의 범위와 ffx의 DOM ID로 그렇게합니다. 하지만 그 후에는 을 다시 설정 원래 선택을 선택하십시오.

이 IE의 매력처럼 작동합니다

setTimeout(function(){ 
    origRange.select(); 
},1000);

내가 FFX에서 같은 것을 할 싶습니다 :

var s = w.getSelection(); 
setTimeout(function(){ 
    s.removeAllRanges(); 
    s.addRange(origRange); 
},1000);

불행하게도, FFX는 협력하지 않았다이 작동하지 않습니다 . 어떤 아이디어?

출처

2010-04-19 Matrym

당신은 우리에게 몇 가지 코드를 보여줄 수 있습니까?우리가 무슨 일이 일어나는지 쉽게 알 수 있습니다. https://developer.mozilla.org/en/DOM/Selection –

짧은 대답은 : IE와 다른 브라우저는 JavaScript를 사용하여 텍스트를 선택하는 구현이 다릅니다 (IE는 독점적 인 방법이 있습니다). Selecting text with JavaScript을보십시오.

또한 MDC의 setSelectionRange을 참조하십시오.

편집 : 약간의 테스트 케이스를 만든 후에 문제가 명확 해집니다.

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>addRange test</title> 
    <style> 
     #trigger { background: lightgreen } 
    </style> 
    </head> 
    <body> 
    <p id="test">This is some (rather short) text.</p> 
    <span id="trigger">Trigger testCase().</span> 
    <script> 
var origRange; 

var reselectFunc = function() { 
    var savedRange = origRange; 
    savedRange.removeAllRanges(); 
    savedRange.addRange(origRange); 
}; 

var testCase = function() { 
    // Before modifying selection, save it 
    var userSelection,selectedText = ''; 

    if(window.getSelection){ 
     userSelection=window.getSelection(); 
    } 
    else if(document.selection){ 
     userSelection=document.selection.createRange(); 
    } 
    selectedText=userSelection; 
    if(userSelection.text){ 
     selectedText=userSelection.text; 
    } 
    if(/msie|MSIE/.test(navigator.userAgent) === false){ 
     /* you shouldn't do this kind of browser sniffing, 
      users of Opera and WebKit based browsers 
      can easily spoof the UA string */ 
     selectedText=selectedText.toString(); 
    } 
    origRange = userSelection; 

    window.setTimeout(reselectFunc, 1000); 
}; 

window.onload = function() { 
    var el = document.getElementById("trigger"); 
    el.onmouseover = testCase; 
}; 
    </script> 
    </body> 
</html>

파이어 폭스, 크롬과 오페라에서이 테스트, 디버깅 도구는 reselectFunc에서 removeAllRanges, 모두 savedRange 및 origRange를 호출 한 후에 다시 설정하는 것을 보여줍니다. 예외는 객체와 addRange 원인 호출하는 파이어 폭스에서 발생한다 :

캐치되지 않는 예외 : [예외 ... nsresult "자바 스크립트 인수를 인수 0 [nsISelection.addRange]를 변환 할 수 없습니다": "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS) " 위치"JS 프레임 : 파일 : ///home/mk/tests/addrange.html :: 익명 : 라인 (19)은 "데이터 없음]

불필요 행 3 개의 브라우저 모두에서 텍스트가 선택되지 않는다고 말하자. 에드.

분명히 의도 된 동작입니다. removeAllRanges을 호출 한 후 (DOM) Selection 객체에 할당 된 모든 변수가 재설정됩니다.

출처

2010-04-19 23:37:15

감사합니다. 도움이되었지만 문제가 완전히 해결 된 것으로 생각하지 않습니다. 그는 "Field"를 사용하고 있는데, 이것은 텍스트가 텍스트/입력에 있음을 의미한다고 생각합니다. 여러 dom 요소 (따라서 조각)에 걸쳐 범위와 선택을 설정할 수 있기를 바랍니다. 이 작업을 수행하는 방법을 알고 있습니까? – Matrym

@Matrym : 질문을 편집 한 후에 테스트 케이스를 추가했습니다. –

Marcel. 맞습니다. 트릭은 범위를 복제 한 다음 특정 원래 범위를 제거하는 것입니다. 이렇게하면 복제 된 범위로 되돌릴 수 있습니다. 당신의 도움으로 아래 코드가 나왔습니다.이 코드는 선택을 다른 곳으로 전환 한 다음 시간 제한에 따라 되돌려줍니다.

나는 당신없이 일을하고 당신에게 정확한 답을 부여 할 수 없었다 : D

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>addRange test</title> 
    <style> 
     #trigger { background: lightgreen } 
    </style> 
    </head> 
    <body> 
    <p id="switch">Switch to this text</p> 
    <p id="test">This is some (rather short) text.</p> 
    <span id="trigger">Trigger testCase().</span> 
    <script> 
var origRange; 
var s = window.getSelection(); 

var reselectFunc = function() { 
    s.removeAllRanges(); 
    s.addRange(origRange); 
}; 

var testCase = function() { 
// Before modifying selection, save it 
var userSelection,selectedText = ''; 

if(window.getSelection){ 
    userSelection=window.getSelection(); 
} 
else if(document.selection){ 
    userSelection=document.selection.createRange(); 
} 
selectedText=userSelection; 
if(userSelection.text){ 
    selectedText=userSelection.text; 
} 
if(/msie|MSIE/.test(navigator.userAgent) === false){ 
    /* you shouldn't do this kind of browser sniffing, 
     users of Opera and WebKit based browsers 
     can easily spoof the UA string */ 
    selectedText=selectedText.toString(); 
} 
origRange = userSelection; 




var range = s.getRangeAt(0); 
origRange = range.cloneRange(); 
var sasDom = document.getElementById("switch"); 
s.removeRange(range); 
range.selectNode(sasDom); 
s.addRange(range); 

window.setTimeout(reselectFunc, 1000); 
}; 
window.onload = function() { 
    var el = document.getElementById("trigger"); 
    el.onmouseover = testCase; 
}; 
    </script> 
</body> 
</html>

출처

2010-04-20 04:48:22 Matrym

허. 다시 s.removeAllRanges()로 전환해야했습니다. 크롬은 그렇지 않다는 것을 인식하지 못했기 때문입니다. 하지만 원래의 선택 범위에서 먼저 복제본을 만들었 으면 좋았습니다. – Matrym

당신은 환영합니다. (하지만이 행동이 이상하다고 생각하지만 다른 질문을 던질 것입니다). 하나의 경고 :'s' (또는'i')와 같은 짧은 전역 변수를 사용하지 마십시오. 브라우저의 다른 구성 요소도이를 사용하여 예기치 않은 동작을 일으킬 수 있습니다. 가장 좋은 것은 하나의 전역 객체를 사용하는 것입니다 변수, 함수, 객체 등이 할당 됨). –

관심을 가질만한 곳 : http://blog.siteroller.net/understanding-javascript-selection-and-range – SamGoody

범위 선택 및 모질라

답변

관련 문제