HTML attribut d'événement onkeydown

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 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.