HTMLInputElement : propriété selectionStart

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é selectionStart de l'interface HTMLInputElement définit la position de début de la sélection de texte actuelle dans un élément HTML <input>.

La propriété selectionStart est un nombre représentant l'index basé sur zéro du caractère immédiatement avant le premier 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 début.

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 selectionStart sur une valeur supérieure à la valeur actuelle de selectionEnd 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é selectionStart 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 selectionStart 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}).`;
});