OUJOOD.COM
Définition et utilisation événement onkeydown
LES BALISES HTML
L'attribut d'événement onkeydown se déclenche lorsque l'utilisateur appuyant sur une touche du clavier.
Astuce : L'ordre des événements liés à l'événement onkeydown est :
onkeydown
OnKeyPress
OnKeyUp
Remarque : L'attribut onkeydown ne peut pas être utilisé avec les éléments : <base>,
<bdo>, <br>, <head>, <html>, <iframe>, <meta>,
<param>, <script>, <style>, ou <title>.
Syntaxe
<input onkeydown="script" />
Valeurs d'attribut
Valeur |
Description |
|---|---|
|
script |
Le script à exécuter sur onkeydown |
Exemple Exécuter un JavaScript lorsqu'un utilisateur presse une touche :
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Votre Titre</title>
<script>
function afficherResultat(event) {
var x;
if (window.event) { // IE8 and earlier
x = event.keyCode;
} else if (event.which) { // IE9/Firefox/Chrome/Opera/Safari
x = event.which;
}
var keychar = String.fromCharCode(x);
// Trouver la balise p dans le document
var resultatParagraphe = document.getElementById("resultat");
// Mettre à jour le contenu de la balise p
resultatParagraphe.innerHTML = "Vous avez pressé la touche " + keychar ;
}
</script>
</head>
<body>
<p>La fonction afficherResultat() se déclenche lorsque l'utilisateur appuie sur une touche dans le champ de saisie. Le résultat est affiché dans la balise p ci-dessous :</p>
<input type="text" onkeydown="afficherResultat(event)">
<p id="resultat" style="color: red; "></p>
</body>
</html>
Dans ce code, une balise <p> avec l'ID "resultat" où le résultat du script sera affiché. La fonction afficherResultat() met à jour le contenu de cette balise à chaque pression de touche.
Appui de navigateur
L'attribut d'événement onkeydown est pris en charge dans tous les principaux navigateurs.
Différences entre HTML 4.01 et HTML5
Aucune.
Par carabde 10 mars 2014