HTMLInputElement : évènement selectionchange

Baseline 2024

Nouvellement disponible

Depuis September 2024, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

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.

Dans cet article

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.

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

onselectionchange = (event) => { }

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

js
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;
});