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

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

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 selectionEnd à une valeur inférieure à la valeur actuelle de selectionStart met à jour les propriétés selectionEnd et selectionStart à cette valeur. Si les deux valeurs sont inférieures à 0, 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é selectionEnd à 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}).`;
});