Objet de sélection se comportant de manière étrange dans le contenu de Chrome Elément modifiable

Question

Je travaille sur un surligneur de syntaxe en temps réel en javascript en utilisant contenteditable. Lors de l'analyse du contenu, j'extrais le texte de la div et j'utilise des motifs regex pour le styler correctement. Ensuite, je place le innerHtml du div dans le contenu analysé. Cependant, cela fait disparaître le curseur de l'écran.

J'ai créé cette fonction pour réinitialiser le curseur, et cela fonctionne très bien dans Firefox. Mais dans Chrome, le curseur se déplace d'une manière bizarre qui est semi-prévisible. Il est généralement défini au premier espace-char dans le document au lieu de l'endroit où il était juste avant l'analyse.

Le caractère d'insertion qui est stocké dans la variable cc est à l'endroit où il devrait être.

/** 
* Put cursor back to its original position after every parsing, and 
* insert whitespace to match indentation level of the line above this one. 
*/ 
findString : function() 
{ 
    cc = '\u2009'; // carret char 

    if (self.find(cc)) 
    { 
     var selection = window.getSelection(); 
     var range = selection.getRangeAt(0); 

     if (this.do_indent && this.indent_level.length > 0) 
     { 
      var newTextNode = document.createTextNode(this.indent_level); 
      range.insertNode(newTextNode); 
      range.setStartAfter(newTextNode); 

      this.do_indent = false; 
     } 

     selection.removeAllRanges(); 
     selection.addRange(range); 
    } 
} 

Quelques faits sur l'appel de ces fonctions:

• Quand je décommenter le code qui passe le contenu innerHtml le curseur se déplace généralement à la fin du document à la place.
• Si je décommente l'appelant findString(), l'analyse est terminée mais le curseur disparaît jusqu'à ce que je remette le focus dans la div.
• Si je décommente les deux lignes, la div se comporte comme on pourrait s'y attendre, sauf, bien sûr, pour l'analyse syntaxique.

Quelle est la cause de cette mauvaise conduite dans Chrome alors qu'il fonctionne dans Firefox?

EDIT: Plus d'informations

que je faisais une exploitation forestière sur window.getSelection() et a remarqué qu'il contenait des informations différentes lorsque l'on compare Chrome et Firefox. Ce qui fait que le script se comporte comme il se doit, mais avec un argument qui est faux.

La chose vraiment étrange est que lorsque je me connecte window.getSelection() que l'action première du script keyhandler il se comporte comme ceci:

• sans modification j'obtenir l'objet « mauvais ».
• Avec un point d'arrêt situé juste sous la directive console.log(), le script s'arrête et le journal affiche un objet "correct", comme je le souhaite.

L'enregistreur:

console.log(window.getSelection()); 
// Do keyhandling stuff... 

Answer 1

Essayez de faire une copie de la gamme originale et l'ajouter à la sélection plutôt que la gamme d'origine à la fin de la fonction, puisque la gamme peut avoir des limites dynamiques , et vous finirez par reculer un "mauvais".