Element : évènement keydown
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 keydown est déclenché lorsque l'on appuie sur une touche.
Contrairement à l'évènement obsolète keypress, l'évènement keydown est déclenché pour toutes les touches, qu'elles produisent ou non une valeur de caractère.
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 Document et 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("keydown", (event) => { })
onkeydown = (event) => { }
Type d'évènement
Un objet KeyboardEvent. Hérite de UIEvent et Event.
Exemple
Exemple avec keydown sur un addEventListener
Cet exemple affiche la valeur de KeyboardEvent.code à chaque fois qu'on appuie sur une touche à l'intérieur de l'élément HTML <input>.
<input placeholder="Cliquez ici, puis appuyez sur une touche." size="40" />
<p id="journal"></p>
const entree = document.querySelector("input");
const journal = document.getElementById("journal");
entree.addEventListener("keydown", journaliserCle);
function journaliserCle(e) {
journal.textContent += ` ${e.code}`;
}
Évènements keydown 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é entre navigateurs pour les utilisateur·ice·s de CJKT (bogue Firefox 354358 (angl.)). Pour ignorer tous les évènements keydown qui font partie de la composition, faites quelque chose comme ceci (229 est une valeur spéciale définie pour un keyCode relatif à un évènement qui a été traité par un IME) :
eventTarget.addEventListener("keydown", (event) => {
if (event.isComposing || event.keyCode === 229) {
return;
}
// faire quelque chose
});
Note :
compositionstart peut se déclencher après keydown lors de la saisie du premier caractère qui ouvre l'IME, et compositionend peut se déclencher avant keydown 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. Cependant, KeyboardEvent.keyCode vaut toujours 229 dans ces situations, il est donc conseillé de vérifier également keyCode, bien que cette propriété soit obsolète.
Spécifications
| Spécification |
|---|
| UI Events # event-type-keydown |
| HTML # handler-onkeydown |