L'évènement selectionchange de l'API Selection est déclenché lorsqu'une sélection de texte à l'intérieur d'un élément HTML <input> change. Cela inclut les modifications de l'étendue sélectionnée de caractères ou le déplacement du caret.

Cet évènement n'est pas annulable.

L'évènement est généralement traité en ajoutant un écouteur sur l'élément <input>, et dans la fonction gestionnaire on lit les propriétés selectionStart, selectionEnd et selectionDirection de HTMLInputElement.

Il est aussi possible d'ajouter un gestionnaire via la propriété onselectionchange et, dans la fonction gestionnaire, d'utiliser Document.getSelection() pour obtenir l'objet Selection. Toutefois, cela est peu utile pour détecter les changements de sélections de texte.

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou affectez un gestionnaire d'évènements à la propriété correspondante.

addEventListener("selectionchange", (event) => { })

onselectionchange = (event) => { }

Type d'évènement

Un objet Event générique.

Exemples

L'exemple ci‑dessous montre comment obtenir le texte sélectionné dans un élément <input>.

HTML

<div>
  Saisissez et sélectionnez du texte ici&nbsp;:<br /><input
    id="my-text"
    rows="2"
    cols="20" />
</div>
<div>selectionStart&nbsp;: <span id="start"></span></div>
<div>selectionEnd&nbsp;: <span id="end"></span></div>
<div>selectionDirection&nbsp;: <span id="direction"></span></div>

JavaScript

const myInput = document.getElementById("my-text");

myInput.addEventListener("selectionchange", () => {
  document.getElementById("start").textContent = myInput.selectionStart;
  document.getElementById("end").textContent = myInput.selectionEnd;
  document.getElementById("direction").textContent = myInput.selectionDirection;
});

Résultat

Spécifications

Compatibilité des navigateurs