HTMLTextAreaElement : é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 se déclenche lorsque la sélection de texte dans un élément HTML <textarea> est modifiée. Cela inclut aussi bien les changements dans la plage de caractères sélectionnés que le déplacement du curseur.

Cet évènement n'est pas annulable.

L'évènement est généralement traité en ajoutant un gestionnaire d'évènement sur l'élément <textarea>, et dans la fonction de gestion, en lisant les propriétés selectionStart, selectionEnd et selectionDirection de HTMLTextAreaElement.

Il est aussi possible d'ajouter un gestionnaire sur l'évènement global onselectionchange, et dans la fonction de gestion, d'utiliser Document.getSelection() pour obtenir la sélection. Cependant, cela n'est pas très utile pour obtenir les changements de sélection texte.

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.

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

onselectionchange = (event) => { }

<div>
  Saisissez et sélectionnez du texte ici&nbsp;:<br />
  <textarea id="my-text" rows="2" cols="20"></textarea>
</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;
});