ansaurus

Question

Answer 1

+1 A:

The short answer is: IE and other browsers differ in their implementations of selecting text using JavaScript (IE has its proprietary methods). Have a look at Selecting text with JavaScript.

Also, see setSelectionRange at MDC.

EDIT: After making a little test case, the problem becomes clear.

<!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>

When testing this in Firefox, Chromium and Opera, the debugging tools show that after invoking removeAllRanges in reselectFunc, both savedRange and origRange are reset. Invoking addRange with such an object causes an exception to be thrown in Firefox:

uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsISelection.addRange]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: file:///home/mk/tests/addrange.html :: anonymous :: line 19" data: no]

No need to say that in all three browsers no text is selected.

Apparently this in intended behaviour. All variables assigned a (DOM)Selection object are reset after calling removeAllRanges.

Marcel Korpel 2010-04-19 23:37:15

Thanks, that's helpful, but I don't think fully solves my issue. He is using "Field", which I think implies that the text is in the textarea / input. I would like to be able to set a range and selection across multiple dom elements (thus a fragment). Do you know of how to do this?

Matrym 2010-04-19 23:46:11

@Matrym: I added a test case after you edited your question

Marcel Korpel 2010-04-20 01:46:31

Answer 2

A:

Thank you Marcel. You're right, the trick is to clone the range, then remove the specific original range. This way we can revert to the cloned range. Your help led me to the below code, which switches the selection to elsewhere, and then back according to a timeout.

I couldn't have done it without you, and grant you the correct answer for it :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>

Matrym 2010-04-20 04:48:22

Huh. I had to switch it back to s.removeAllRanges(); because chrome didn't recognize it otherwise. But, doing so was ok - so long as a clone was made of the original selection range first.

Matrym 2010-04-20 06:55:19

You're welcome (though I think this behaviour is strange, but I'll file another question for that). One warning: don't use short global variables like `s` (or even `i`), as other components in a browser might use them as well, resulting in unexpected behaviour (best is to use one global object to which all other variables, functions, objects, etc., are assigned).

Marcel Korpel 2010-04-20 11:33:24

ansaurus

tags:

views:

answers:

Range Selection and Mozilla

related questions