Strange comportement firefox/javascript en utilisant les plages

Question

Hey, donc je travaille avec des plages, j'essaie de limiter la sélection d'un utilisateur sur la page. Ce que je veux dire, c'est que l'utilisateur peut sélectionner ce qu'il veut, mais la sélection ne peut pas dépasser les limites que je vais définir.

D'abord, je définis les "limites" avec une plage définie. Ensuite, je compare la sélection actuelle de l'utilisateur avec la plage définie, si le début de la sélection actuelle est au-dessous des limites OU la fin de la sélection actuelle est supérieure aux limites que je modifie en conséquence.

La fonction ci-dessous ne fonctionne que si la sortie I une alerte avant que le processus commence, Si je supprime l'alerte, puis Firefox se comporte bizarre (comme sélectionner une autre partie de la page, etc.)

La question est: Pourquoi le code suivant fonctionne avec une alerte et pourquoi il ne fonctionne pas comme prévu sans l'alerte?

Merci!

var range = document.createRange(); // this is the boundaries range 
range.selectNodeContents(document.getElementById("container")); 

function test(){ 
      alert("let's go"); // if I remove this alert, the code doesn't work as expected, WHY?! 
      if(window.getSelection().rangeCount == 0){ 
       return; 
      } 
      var curRange = window.getSelection().getRangeAt(0); 
      if(curRange.compareBoundaryPoints(Range.START_TO_START, range) < 0){ 
       curRange.setStart(range.startContainer,range.startOffset); 
      } 

      if(curRange.compareBoundaryPoints(Range.END_TO_END, range) > 0){ 
       curRange.setEnd(range.endContainer,range.endOffset); 
      } 
     } 

Answer 1

Tout d'abord, pour travailler dans d'autres navigateurs (sauf IE < = 8, qui a une façon tout à fait différente de faire ce genre de choses), vous devez sélectionner à nouveau la gamme. Deuxièmement, pour le faire fonctionner dans Firefox, vous devez travailler sur un clone de la plage sélectionnée d'origine:

function test(){ 
    var sel = window.getSelection(); 
    if (sel.rangeCount == 0) { 
     return; 
    } 
    var curRange = sel.getRangeAt(0).cloneRange(); 
    if (curRange.compareBoundaryPoints(Range.START_TO_START, range) < 0) { 
     curRange.setStart(range.startContainer,range.startOffset); 
    } 
    if (curRange.compareBoundaryPoints(Range.END_TO_END, range) > 0) { 
     curRange.setEnd(range.endContainer,range.endOffset); 
    } 
    sel.removeAllRanges(); 
    sel.addRange(curRange); 
}