HTMLInputElement : méthode setSelectionRange()
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La méthode setSelectionRange() de l'interface HTMLInputElement définit les positions de début et de fin de la sélection de texte courante dans un élément HTML <input> ou <textarea>. Cela met à jour l'état de sélection immédiatement, bien que la mise en évidence visuelle n'apparaisse que lorsque l'élément a la sélection.
Vous pouvez éventuellement définir la direction dans laquelle la sélection est considérée comme s'effectuant. Cela permet, par exemple, d'indiquer que la sélection est effectuée par un·e utilisateur·ice qui clique et fait glisser depuis la fin du texte sélectionné vers le début.
Cette méthode met à jour, en un seul appel, les propriétés HTMLInputElement.selectionStart, HTMLInputElement.selectionEnd et HTMLInputElement.selectionDirection, que l'élément ait ou non la sélection. La mise en évidence visuelle de la sélection n'apparaît que lorsque l'élément a la sélection.
L'élément doit être de l'un des types d'entrée suivants : password, search, tel, text ou url. Sinon, le navigateur lève une exception InvalidStateError.
Si vous souhaitez sélectionner tout le texte d'un élément input, vous pouvez utiliser la méthode HTMLInputElement.select() à la place.
Syntaxe
setSelectionRange(selectionStart, selectionEnd)
setSelectionRange(selectionStart, selectionEnd, selectionDirection)
Paramètres
selectionStart-
L'indice (à partir de 0) du premier caractère sélectionné. Un indice supérieur à la longueur de la valeur de l'élément est traité comme pointant vers la fin de la valeur.
selectionEnd-
L'indice (à partir de 0) du caractère après le dernier caractère sélectionné. Un indice supérieur à la longueur de la valeur de l'élément est traité comme pointant vers la fin de la valeur. Si
selectionEndest inférieur àselectionStart, alors les deux sont traités comme ayant la valeurselectionEnd. selectionDirectionFacultatif-
Une chaîne de caractères indiquant la direction dans laquelle la sélection est considérée comme ayant été effectuée. Valeurs possibles :
"forward""backward""none"si la direction est inconnue ou sans importance. Valeur par défaut.
Valeur de retour
Aucune (undefined).
Exceptions
Exemples
Cliquez sur le bouton de cet exemple pour sélectionner les troisième, quatrième et cinquième caractères du champ de texte (« zil » dans le mot « Mozilla »).
HTML
<input type="text" id="text-box" size="20" value="Mozilla" />
<button>Sélectionner le texte</button>
JavaScript
function selectText() {
const input = document.getElementById("text-box");
input.focus();
input.setSelectionRange(2, 5);
}
document.querySelector("button").addEventListener("click", selectText);
Résultat
Spécifications
| Specification |
|---|
| HTML # dom-textarea/input-setselectionrange-dev |
Compatibilité des navigateurs
Voir aussi
- L'élément HTML
<input> - L'élément HTML
<textarea> - L'interface
HTMLInputElement - L'interface
Selection