Element : évènement keyup
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.
L'évènement keyup est déclenché lorsque l'on relâche une touche.
Les évènements keydown et keyup fournissent un code indiquant quelle touche est enfoncée, tandis que keypress indique quel caractère a été saisi. Par exemple, un « a » minuscule est signalé comme 65 par keydown et keyup, mais comme 97 par keypress. Un « A » majuscule est signalé comme 65 par tous les évènements.
La cible d'un évènement clavier est l'élément actuellement sélectionné qui traite l'activité du clavier. Cela inclut : <input>, <textarea>, tout élément qui est contentEditable, et tout autre élément avec lequel on peut interagir au clavier, comme <a>, <button>, et <summary>. Si aucun élément approprié n'est sélectionné, la cible de l'évènement est le <body> ou la racine. L'évènement se propage. Il peut atteindre le Document et la Window.
La cible d'un évènement peut changer entre différents évènements clavier. Par exemple, la cible du keydown lors de l'appui sur la touche Tab est différente de celle du keyup, car la sélection a changée.
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("keyup", (event) => { })
onkeyup = (event) => { }
Type d'évènement
Un objet KeyboardEvent. Hérite de UIEvent et Event.
Exemples
Exemple addEventListener avec keyup
Cet exemple affiche la valeur de KeyboardEvent.code à chaque fois qu'on relâche une touche à l'intérieur de l'élément HTML <input>.
<input
placeholder="Cliquez ici, puis appuyez et relâchez une touche."
size="40" />
<p id="journal"></p>
const entree = document.querySelector("input");
const journal = document.getElementById("journal");
entree.addEventListener("keyup", journaliserCle);
function journaliserCle(e) {
journal.textContent += ` ${e.code}`;
}
Évènements keyup avec IME
Depuis Firefox 65, les évènements keydown et keyup sont désormais déclenchés pendant la composition de la méthode de saisie, afin d'améliorer la compatibilité inter-navigateurs pour les utilisateur·ice·s CJKT (bogue Firefox 354358 (angl.)). Pour ignorer tous les évènements keyup qui font partie d'une composition, faites quelque chose comme ceci :
eventTarget.addEventListener("keyup", (event) => {
if (event.isComposing) {
return;
}
// faire quelque chose
});
Note :
Contrairement à keydown, les évènements keyup ne disposent pas de valeurs keyCode spécifiques pour les évènements IME. Toutefois, comme pour keydown, compositionstart peut se déclencher après keyup lors de la saisie du premier caractère qui ouvre l'IME, et compositionend peut se déclencher avant keyup lors de la saisie du dernier caractère qui ferme l'IME. Dans ces cas, isComposing est faux même lorsque l'évènement fait partie de la composition.
Spécifications
| Spécification |
|---|
| UI Events # event-type-keyup |
| HTML # handler-onkeyup |