Les objets KeyboardEvent décrivent l'interaction d'un utilisateur avec le clavier. Chaque événement décrit une touche ; le type d'événement (keydown, keypress, ou keyup) identifie quel type d'activité a été effectué.
KeyboardEvent indique exactement ce qui est en train de se passer sur une touche. Lorsque vous devez gérer une saisie de texte, utilisez l'événement input HTML5 à la place. Par exemple, si un utilisateur saisit du texte à partir d'un système d'écriture à la main comme une tablette PC, les événements touche peuvent ne pas être déclenchés.KeyboardEvent.Cette interface hérite également des méthodes de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.
KeyboardEvent. Ceci a été implémenté seulement par Gecko (d'autres utilisaient {{domxref ("KeyboardEvent.initKeyboardEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.KeyboardEvent. Cela n'a jamais été implémenté par Gecko (qui utilisait {{domxref ("KeyboardEvent.initKeyEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.Cette interface hérite également des propriétés de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.
true si la touche Alt (Option ou ⌥ sous OS X) était active quand l'évènement touche a été généré.Note : si la touche est utilisée comme une macro insérant plusieurs caractères, la valeur de cet attribut est la chaîne entière, pas seulement le premier caractère.
Avertissement : cela a été supprimé des DOM Level 3 Events. C'est pris en charge uniquement sur IE9 + et Microsoft Edge.
keypress. Pour les touches dont l'attribut char contient plusieurs caractères, il s'agit de la valeur Unicode du premier caractère de cet attribut. Dans Firefox 26, cela retourne des codes pour les caractères imprimables.Avertissement : cet attribut est obsolète : vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.
true si la touche Ctrl était active lorsque l'événement touche a été généré.true si l'événement est déclenché après compositionstart et avant compositionend.true si la touche Meta (sur les claviers Mac, la touche ⌘ Command ; sur les claviers Windows, la touche Windows (⊞)) était active quand l'évènement touche a été généré.true si la touche est maintenue enfoncée de telle sorte qu'elle se répète automatiquement.true si la touche Shift était active quand l'évènement touche a été généré.keyCode.
Les événements existants sont keydown, keypress et keyup. Pour la plupart des touches, Gecko génère une suite d'événements touche comme suit :
keydown est envoyé ;keypress est envoyé ;keyup est envoyé.Certaines touches inversent l'état d'un voyant lumineux ; celles-ci comprennent des touches telles que Caps Lock, Num Lock et Scroll Lock. Sous Windows et Linux, ces touches génèrent uniquement les événements keydown et keyup.
Sous Linux, Firefox 12 et les versions antérieures ont également envoyé l'événement keypress pour ces touches.
Cependant, une limitation du modèle d'événement Mac OS X fait que Caps Lock ne génère que l'événement keydown. Num Lock était supporté sur certains modèles d'ordinateurs portables plus anciens (modèles 2007 et plus anciens), mais depuis lors, Mac OS X n'a pas supporté Num Lock même sur les claviers externes. Sur les MacBooks plus anciens avec une touche Num Lock, cette touche ne génère aucun événement touche. Gecko supporte la touche Scroll Lock si un clavier externe ayant une touche F14 est connecté. Dans certaines anciennes versions de Firefox, cette touche générait un événement keypress ; ce comportement incohérent était le {{bug(602812)}}.
Lorsqu'une touche est maintenue enfoncée, elle commence à se répéter automatiquement. Cela a pour résultat qu'une suite d'événements similaire à ce qui suit est générée :
keydownkeypresskeydownkeypresskeyupC'est ce que la spécification DOM Niveau 3 dit qu'il devrait se produire. Cependant, il y a quelques mises en garde, comme décrit ci-dessous.
Dans certains environnements basés sur GTK, l'auto-répétition génère automatiquement un événement natif lors de la répétition automatique, et Gecko n'a aucun moyen de connaître la différence entre une suite répétée de touches et une répétition automatique. Sur ces plateformes, une touche auto-répétée génère donc la suite d'événements suivante :
keydownkeypresskeyupkeydownkeypresskeyupkeyupDans ces environnements, malheureusement, il n'y a aucun moyen pour que le contenu Web puisse faire la différence entre les touches répétées automatiquement et les touches qui sont simplement pressées à plusieurs reprises.
Avant Gecko 5.0 {{geckoRelease('5.0')}}, la gestion du clavier était moins cohérente entre les plates-formes.
Note : le déclenchement manuel d'un événement ne génère pas l'action par défaut associée à cet événement. Par exemple, le déclenchement manuel d'un événement touche n'entraîne pas l'apparition de cette lettre dans une zone de saisie de texte ayant la focalisation. Dans le cas des événements de l'interface utilisateur, cela est important pour des raisons de sécurité, car cela empêche les scripts de simuler les actions de l'utilisateur interagissant avec le navigateur lui-même.
<!DOCTYPE html>
<html>
<head>
<script>
'use strict';
document.addEventListener('keydown', (event) => {
const nomTouche = event.key;
if (nomTouche === 'Control') {
// Pas d'alerte si seule la touche Control est pressée.
return;
}
if (event.ctrlKey) {
// Même si event.key n'est pas 'Control' (par ex., 'a' is pressed),
// event.ctrlKey peut être true si la touche Ctrl est pressée dans le même temps.
alert(`Combinaison de ctrlKey + ${nomTouche}`);
} else {
alert(`Touche pressée ${nomTouche}`);
}
}, false);
document.addEventListener('keyup', (event) => {
const nomTouche = event.key;
// Dès que l'utilisateur relâche la touche Ctrl, la touche n'est plus active.
// Aussi event.ctrlKey est false.
if (nomTouche === 'Control') {
alert('La touche Control a été relâchée');
}
}, false);
</script>
</head>
<body>
</body>
</html>
| Spécification | Statut | Commentaire |
|---|---|---|
| {{SpecName('UI Events', '#interface-keyboardevent', 'KeyboardEvent')}} | {{Spec2('UI Events')}} |
La spécification d'interface KeyboardEvent est passée par de nombreuses versions préliminaires, d'abord sous DOM Events Level 2 où elle a été supprimée du fait qu'aucun consensus n'avait émergé, puis sous DOM Events Level 3. Cela conduit à l'implémentation de méthodes d'initialisation non standard, la version ancienne DOM Events Level 2, {{domxref("KeyboardEvent.initKeyEvent()")}} par les navigateurs Gecko et la version prémiminaire DOM Events Level 3, {{domxref("KeyboardEvent.initKeyboardEvent()")}} par d'autres navigateurs. Tous deux ont été remplacés par l'utilisation moderne d'un constructeur : {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.
{{Compat("api.KeyboardEvent")}}