HTMLTextAreaElement : 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 HTMLTextAreaElement indique la position de début de la sélection de texte courante dans un élément HTML <textarea>.

La propriété selectionStart est un nombre représentant l'indice basé sur zéro du premier caractère sélectionné dans un <textarea>. La propriété peut être utilisée pour obtenir ou définir la position de début.

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

Définir selectionStart à une valeur supérieure à la valeur actuelle de selectionEnd met à jour les propriétés selectionStart et selectionEnd à cette valeur. Si cette valeur est supérieure ou égale à textLength, les deux propriétés sont définies à la valeur de la propriété textLength.

La valeur de la propriété peut être lue et définie sans que le <textarea> 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 la propriété selectionStart à une nouvelle valeur déclenche les évènements selectionchange et select.

Exemples

Utilisation simple

Cet exemple affiche le texte sélectionné ainsi que ses positions de début et de fin. Sélectionnez du texte dans la zone de texte, puis cliquez sur le bouton.

HTML

html

<label for="boite-texte">Sélectionnez du texte&nbsp;:</label>
<textarea id="boite-texte" rows="3">The quick brown fox.</textarea>
<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}).`;
});