HTMLInputElement : évènement selectionchange

Baseline 2024

Newly available

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.

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) => { }

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