Maison > interface Web > js tutoriel > Comment placer systématiquement le curseur à la fin du contenu dans un environnement multi-navigateurs ?

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

Linda Hamilton
Libérer: 2024-11-19 08:54:03
original
946 Les gens l'ont consulté

How to Consistently Place the Caret at the End of Content in a Cross-Browser Environment?

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 :


<div class="code" style="position:relative; padding:0px; margin:0px;"><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();
}
Copier après la connexion

}

Implémentation

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

...

placeCaretAtEnd( document.querySelector('p') );
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal