Element : évènement keypress
Obsolète: Cette fonctionnalité n'est plus recommandée. Même si certains navigateurs la prennent encore en charge, elle a peut-être déjà été supprimée des standards du web, est en passe d'être supprimée ou n'est conservée qu'à des fins de compatibilité. Évitez de l'utiliser et mettez à jour le code existant si possible ; consultez le tableau de compatibilité au bas de cette page pour vous aider à prendre votre décision. Sachez que cette fonctionnalité peut cesser de fonctionner à tout moment.
L'évènement keypress est déclenché lorsqu'une touche correspondant à une lettre, un chiffre, une ponctuation ou un symbole (angl.) est enfoncée, ou lorsque la touche Entrée est enfoncée — y compris lorsque la touche Entrée est enfoncée en combinaison avec la touche Maj ou Ctrl. En revanche, lorsqu'une touche de modification telle que Alt, Maj, Ctrl, Meta, Échap ou Option est enfoncée seule, l'évènement keypress n'est pas déclenché.
Attention :
Depuis que cet évènement est obsolète, vous devez utiliser beforeinput ou keydown à la place.
L'évènement se propage. Il peut atteindre Document et Window.
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("keypress", (event) => { })
onkeypress = (event) => { }
Type d'évènement
Un objet KeyboardEvent. Hérite de UIEvent et Event.
Exemples
Exemple avec keypress sur un addEventListener
Cet exemple affiche la valeur de KeyboardEvent.code à chaque fois qu'on appuie sur une touche après avoir cliqué dans l'élément HTML <input>.
Pour voir quelles touches déclenchent un évènement keypress et quelles touches ne le font pas, essayez d'appuyer sur les suivantes :
- les touches lettres, les touches chiffres et les touches de ponctuation
- les touches symboles telles que les touches $, +, =, % et +
- les touches de modification telles que les touches Alt, Maj, Ctrl, Meta, Échap, Option ou ⌘
- la touche Entrée
- la touche Entrée en combinaison avec les touches Maj ou Ctrl
- la touche Entrée en combinaison avec des touches de modification autres que les touches Maj ou Ctrl
<div>
<label for="exemple"
>Sélectionnez le champ et tapez quelque chose :</label
>
<input type="text" name="text" id="exemple" />
</div>
<p id="journal"></p>
const journal = document.getElementById("journal");
const entree = document.querySelector("input");
entree.addEventListener("keypress", journaliserCle);
function journaliserCle(e) {
journal.textContent += ` ${e.code}`;
}
Équivalent avec onkeypress
entree.onkeypress = journaliserCle;
Spécifications
| Spécification |
|---|
| UI Events # event-type-keypress |
| HTML # handler-onkeypress |