HTMLInputElement : propriété selectionEnd

Baseline

Large disponibilité

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.

Voir la compatibilité complète
En savoir plus

La propriété selectionEnd de l'interface HTMLInputElement définit la position de fin de la sélection de texte actuelle dans un élément HTML <input>.

La propriété selectionEnd est un nombre représentant l'index basé sur zéro du caractère immédiatement après le dernier caractère sélectionné dans un <input> de type texte. La propriété peut être utilisée pour récupérer ou définir la position de fin.

Lorsqu'aucun texte n'est sélectionné, la valeur de selectionStart et de selectionEnd est la position du curseur à l'intérieur de l'élément <input>.

Définir selectionEnd sur une valeur inférieure à la valeur actuelle de selectionStart met à jour les deux propriétés avec la nouvelle valeur. Les valeurs supérieures à la longueur de la valeur de l'élément <input> sont considérées comme la fin de la valeur.

La propriété selectionEnd ne s'applique qu'aux éléments <input> de types text, search, url, tel et password. Pour les autres types d'éléments <input>, la lecture de la propriété retourne null et sa définition déclenche une exception InvalidStateError DOMException.

La valeur de la propriété peut être récupérée et définie sans que l'élément <input> ait la sélection, mais l'élément doit avoir la sélection pour que le pseudo-élément CSS ::selection corresponde au texte sélectionné.

Définir selectionEnd sur une nouvelle valeur déclenche les évènements selectionchange et select.

<label for="boite-texte">Sélectionnez du texte&nbsp;:</label>
<input id="boite-texte" type="text" value="Le renard brun rapide." />
<button id="afficher-selection" type="button">Afficher la sélection</button>
<p id="sortie">Aucune sélection signalée pour le moment.</p>

JavaScript

const boiteTexte = document.querySelector("#boite-texte");
const sortie = document.querySelector("#sortie");

document.querySelector("#afficher-selection").addEventListener("click", () => {
  const start = boiteTexte.selectionStart;
  const end = boiteTexte.selectionEnd;
  const selectedText = boiteTexte.value.substring(start, end);

  sortie.textContent = `Vous avez sélectionné « ${selectedText} » (début : ${start}, fin : ${end}).`;
});