Comment placer systématiquement le curseur à la fin du contenu dans un environnement multi-navigateurs ?

Placement du curseur à la fin du contenu : une solution multi-navigateurs

Dans le développement Web, permettre aux utilisateurs de modifier du texte nécessite de garantir que le curseur ( curseur) s’affiche correctement. Cela pose un défi en matière de compatibilité entre navigateurs.

Comportement spécifique au navigateur

Différents navigateurs gèrent le contenu modifiable différemment :

• Chrome : Insertions
  pour les sauts de ligne
• Firefox : Insère
  et utilise
  pour les nouvelles lignes
• IE : Insère

  pour les nouveaux paragraphes

Définition du curseur à la fin

Pour définir de manière cohérente le curseur à la fin du texte, quel que soit le navigateur, vous pouvez implémenter la fonction suivante :

<pre class="brush:php;toolbar:false">el.focus();
if (typeof window.getSelection != "undefined"
        &amp;&amp; typeof document.createRange != "undefined") {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(false);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
    var textRange = document.body.createTextRange();
    textRange.moveToElementText(el);
    textRange.collapse(false);
    textRange.select();
}

}

Implémentation

Pour utiliser cette fonction, appelez-la simplement après avoir créé un fichier modifiable élément :

...

placeCaretAtEnd( document.querySelector('p') );

Avantages

Cette croix -la solution de navigateur offre une expérience cohérente et conviviale pour l'édition de texte, garantissant que le curseur est toujours positionné correctement à la fin du texte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!