réinitialiser la position du curseur dans le contenu modifiable après le changement dom

Question

Je augmente le texte pendant qu'il est écrit, comme par ex. mise en évidence de la syntaxe via des travées autour des mots-clés, dans un champ accessible.

J'ai le problème commun du curseur qui saute vers le début du contenteditable. J'ai essayé la solution par Nico Burns sur Set cursor position on contentEditable <div> cela a fonctionné dans l'exemple mais pas pour mon code, probablement parce que je change le DOM dans le contenteditable lui-même.

code complet à: http://pastie.org/2060277

output.addEventListener('keyup',augmentInput,false); 
     output.addEventListener('keydown',saveCursorPos,false); 
     output.addEventListener('mousedown',saveCursorPos,false); 
     output.addEventListener('keyup',restoreCursorPos,false); 

     function saveCursorPos(e){ 
      //var selection = window.getSelection(); 
      savedRange = window.getSelection().getRangeAt(0); 
      console.log("save "+e.type,savedRange); 
     } 

     function restoreCursorPos(e){ 
     document.getElementById("output").focus(); 

      if (savedRange != null) { 
       var s = window.getSelection(); 

       if (s.rangeCount > 0){ 
        s.removeAllRanges(); 
       } 

       s.addRange(savedRange); 
       console.log("range !=0 "+e.type, savedRange); 
      } 

      else { 
       window.getSelection().addRange(savedRange); 
       console.log("range ==0 "+e.type, savedRange); 
      } 
     } 

frappante:

• que la plage est enregistré comme il devrait le clic de la souris (en référence à l'élément le plus interne le curseur est, avec décalage correct) mais pas si elle est sauvegardée sur keydown (que dans la référence à la contented elle-même, startOffset toujours 0, peu importe où le curseur était)
• Si j'empêche le curseur d'être enregistré sur le clavier et d'utiliser simplement le mouseup pour sauver la gamme, il est resored comme si elle n'a jamais été enregistrée correctement ou elle a changé: référence à la contented lui-même, startOffset toujours 0. Donc je me demande si l'objet range change, par exemple. reflétant les changements dans le DOM?

Answer 1

Les plages réagissent aux changements dans le DOM et il y a rules governing this. Les modifications affectant les plages sélectionnées ne sont pas spécifiées dans la sélection, et le comportement du navigateur varie. Si vous apportez de grands changements au DOM, je suggère d'utiliser une approche différente, comme celle utilisée par la sélection save/restore module dans ma bibliothèque Rangy, qui consiste à insérer des éléments de marqueur invisibles temporaires dans le DOM à le début et la fin de la sélection.