Les événements de clavier avec jQuery

Sommaire

1- Objectifs
2- Présentation
3- L’écoute sur le clavier
4- Quelques méthodes
4.1- keydown()
5- Application
5.1.1- Sommaire du cours jQuery

Les événements de clavier avec jQuery

Objectifs

Connaitre les événements de clavier en jQuery.
Savoir utiliser les événements de clavier en jQuery.

Présentation

La saisie au clavier est également un événement. Découvrez dans cette leçon comment améliorer votre interface utilisateur lorsqu’un utilisateur de votre site Web appuie sur certaines touches du clavier.

L’écoute sur le clavier

Le clavier peut être écouté par un script jQuery. L’utilisation la plus fréquente que l’on peut en faire est de détecter l’appui d’une touche et de lancer une action seulement si la bonne a été pressée.
Les événements associés ne sont pas très nombreux, on en trouvera seulement trois :

Action	Fonction
Se lance lorsqu’une touche du clavier est enfoncée	keydown()
Se lance lorsqu’on maintient une touche enfoncée .	keypress()
Se lance lorsqu’on relâche une touche préalablement enfoncée.	keyup()

Quelques méthodes

keydown()

Présentation

Liez un gestionnaire d’événements à l’événement JavaScript « keydown » ou déclenchez cet événement sur un élément.
L’événement keydown se produit lorsqu’une touche du clavier est enfoncée.
La méthode keydown () déclenche l’événement keydown ou associe une fonction à exécuter lorsqu’un événement
keydown se produit.

Syntaxe

$(selector).keydown(function) // Lignes de code });

Exemple (Taper A pour afficher )

Changer la couleur de fond d’un champ de texte selon que l’utilisateur soit en train d’écrire ou pas.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Méthode keydown</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<!--On ecrit notre code JavaScript / jQuery-->
<script>
$(document).ready(function(){
//Si une touche est enfoncée, le champ est bleu 
$('#prenom').keydown(function(){
    $(this).css('background-color', '#69C');
});
$('#nom').keydown(function(){
    $(this).css('background-color', '#69C');
}); 
//Si on relache la touche, le champ devient vert
	$('#prenom').keyup(function(){
 	$(this).css('background-color', 'green');
});
$('#nom').keyup(function(){
 	$(this).css('background-color', 'green');
});
});
</script>

</head>
<body>
<h1>Gestion d'évènements en jQuery</h1> 
<label for='prenom'>Entrez votre prénom </label>
<input type='text' id='prenom' name='prenom'></br></br>
<label for='nom'>Entrez votre nom </label>
<input type='text' id='nom' name='prenom'> 
</body>
</html>

Application

Soit la page HTML suivante:

Les événements de clavier avec jQuery

Pour l’élément fielset et sa légende utiliser le style css suivant:

<style>
    fieldset{
    border: 2px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    margin: 0 0 1.5em 0 !important;
}
legend{
    font-size: 1.2em !important;
    font-weight: bold !important;
    text-align: left !important;
    width:auto;
}
  </style>