Comment faire défiler jusqu'à la fin d'une saisie de texte longue dans tous les navigateurs sauf IE6-8 et Opera ?

Défiler jusqu'à la fin d'une saisie de texte longue

Dans cette situation, où un sélecteur d'image remplit un champ de saisie de texte avec un texte trop long URL, l’affichage du début de l’URL fournit un minimum d’informations. Une solution est recherchée pour faire défiler le champ de texte vers l'extrême droite, affichant la fin de l'URL.

Compatibilité des navigateurs

La solution proposée utilise HTMLInputElement.setSelectionRange() pour définir la position du curseur à la fin de la valeur d'entrée après avoir explicitement défini le focus. Cette méthode est prise en charge par tous les principaux navigateurs à l'exception d'IE6-8 et Opera.

Mise en œuvre

Pour mettre en œuvre cette solution, suivez ces étapes :

1. Définissez le focus() du champ de saisie pour vous assurer qu'il est actif.
2. Définissez la plage de sélection du champ de saisie à l'aide de setSelectionRange(foo.value.length,foo.value.length). Cela placera le curseur à la fin de la valeur d'entrée.

Exemple de code

<code class="javascript">var foo = document.getElementById("foo");
foo.value = "http://stackoverflow.com/questions/1962168/scroll-to-the-very-right-of-a-long-text-input";
foo.focus();
foo.setSelectionRange(foo.value.length,foo.value.length);</code>

Mises en garde

Bien que cette solution réussisse à faire défiler le champ de texte jusqu'à la fin de l'URL, elle s'accompagne d'une mise en garde mineure : une fois que le champ de saisie perd le focus, il reviendra à l'affichage du début de l'URL.

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!