Événements jQuery pour plus d'interactivité Web

La gestion des interactions utilisateur sur le Web peut être complexe, surtout avec la diversité des navigateurs.

Cette complexité peut entraîner des expériences utilisateur incohérentes et frustrantes.

Découvrez comment jQuery simplifie la gestion des événements pour créer des applications Web interactives et cohérentes.

Table de matière

Événements jQuery : keydown et keyup Interactivité Web : keydown et keyup FAQ Conclusion

Formation Maîtriser jQuery : Les Fondamentaux de Manière Pratique

Apprenez les bases de jQuery à travers des projets pratiques et engageants.

Dans le monde dynamique du développement Web, la maîtrise des événements jQuery est une compétence fondamentale qui peut considérablement améliorer l’interactivité de vos applications Web. Les événements jQuery relient l’interface utilisateur et les fonctionnalités de votre site Web, vous permettant de créer des expériences réactives et conviviales. En mettant l’accent sur la simplicité et l’efficacité, jQuery simplifie le processus de gestion des événements dans différents navigateurs, transformant le code JavaScript complexe en segments gérables et lisibles.

jQuery classe les événements en plusieurs types, notamment les événements de souris, les événements de clavier, les événements de formulaire et les événements de document/fenêtre. Dans notre article, nous allons nous attarder sur les événements liés au clavier.

Les événements de clavier jQuery font référence à l’ensemble des événements déclenchés par les touches du clavier. Avec jQuery, vous pouvez lier ou attacher divers événements de clavier à des éléments HTML et effectuer des actions spécifiques lorsque l’utilisateur interagit avec eux à l’aide du clavier. Certains des événements de clavier les plus couramment utilisés dans jQuery incluent keypress , keydown et keyup . Ces événements peuvent être utilisés pour capturer la saisie de l’utilisateur, valider les données, contrôler le flux de l’application et offrir une meilleure expérience utilisateur.

Cependant, jQuery fournit plusieurs événements de clavier qui vous permettent de gérer la saisie utilisateur via le clavier.

Événements jQuery : keydown et keyup

Méthode d’événement keydown

L’événement keydown() dans jQuery est déclenché lorsqu’une touche du clavier est enfoncée. Cet événement est attaché à un élément et est déclenché chaque fois qu’un utilisateur appuie sur une touche alors que l’élément est actif.

Méthode d’événement keyup

L’événement jQuery keyup() est déclenché lorsqu’une touche du clavier est relâchée après avoir été enfoncée. Il s’agit d’un type d’événement clavier utilisé pour détecter le moment où un utilisateur relâche une touche du clavier.

Nous allons ensemble essayer de bien comprendre ces deux notions d’événements dans une application.

Interactivité Web : keydown et keyup

L’exemple suivant changera la couleur de texte des différents éléments sélectionnés en vert lorsque l’événement keydown est déclenché et recouvrira sa couleur initiale lorsque la touche du clavier sera relâchée.

Voici tout le code nécessaire pour faire cela.

Code HTML:

				
					
 <!DOCTYPE html>
<html lang="fr">
<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>

<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-81fd7324-28ec-4226-8866-635ced7f1026: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-81fd7324-28ec-4226-8866-635ced7f1026: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"81fd7324-28ec-4226-8866-635ced7f1026","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<form action="" method="post">
<label for="login">login</label>
<input type="text" id="login">
<label for="pass">pass</label>
<input type="password" id="pass">
<input type="submit" value="valider">
</form>
<script src="js/jquery.js" data-rocket-defer defer></script>
<script src="js/script.js" data-rocket-defer defer></script>
<script>window.addEventListener('DOMContentLoaded', function() {var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"ec0bb1c92f","url":"https:\/\/blog.alphorm.com\/evenements-jquery-interactivite-web","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}});</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>

Code CSS :

				
					
 body {
font-family: Arial, Helvetica, sans-serif;
background-color: #2c3e50;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
form {
background-color: #ecf0f1;
padding: 25px;
width: 350px;
border-radius: 9px;
}
input {
display: block;
margin: 15px;
padding: 10px;
width: 100%;
box-sizing: border-box;
outline: none;
border: 1px solid #ddd;
}
label {
font-size: 1.2rem;
text-transform: capitalize;
margin-top: 25px;
display: block;
}

Code JavaScript :

				
					
 $(document).ready(function() {
$('#login').keydown(function() {
$('label[for="login"]').css('color', '#27ae60');
});
$('#login').keyup(function() {
$('label[for="login"]').css('color', '#000');
});
$('#pass').keydown(function() {
$('label[for="pass"]').css('color', '#27ae60');
});
$('#pass').keyup(function() {
$('label[for="pass"]').css('color', '#000');
});
});

Vous remarquez que le login et le pass deviennent vert lorsque la touche du clavier est enfoncée :

Le login et le pass redeviennent noir lorsque la touche du clavier est relâchée :

L’événement keydown() est souvent utilisé pour capturer la saisie de l’utilisateur et effectuer des actions spécifiques en fonction de cette saisie. Par exemple, vous pouvez utiliser l’événement keydown() pour valider les saisies de formulaire, contrôler le flux de l’application ou fournir des raccourcis à l’utilisateur, quant à l’événement keyup(), il peut être utilisé pour détecter le relâchement d’une touche du clavier. Il est souvent utilisé en combinaison avec d’autres événements clavier, tels que keydown() et keypress(), pour créer des interactions complexes avec la saisie au clavier. Nous allons justement aborder l’événement keypress dans la prochaine section.

Astuce Pratique : les événements de clavier peuvent être associés à n’importe quel élément, mais l’événement est envoyé uniquement à l’élément qui a le focus. C’est pourquoi les événements de clavier sont généralement associés aux contrôles de formulaire tels que la zone de saisie de texte ou la zone de texte.

Appliquer la méthode d’événement keyup

Histoire d’aller plus loin et de vous montrer l’utilisation des méthodes d’événement dans des cas concrets, nous allons revenir sur la méthode keyup et compter grâce à cette dernière le nombre de caractères qu’il aurait dans un champ de saisie.

Toujours dans le même exercice que le précédent, vous allez ajouter des bouts de code à vos fichiers css et js pour pouvoir réaliser cela.

Code CSS :

				
					
 p {
text-align: center;
color:#8e44ad;
font-size: 1rem;
}

Code JavaScript:

				
					
 $('#nom').keyup(function() {
if(this.value.length < 4) {
$('#verifNom').text('Le nom doit avoir au moins 4 caractères.');
} else {
$('#verifNom').text('');
}
});
$('#prenom').keyup(function() {
if(this.value.length < 3) {
$('#verifPrenom').text('Le prénom doit avoir au moins 3 caractères.');
} else {
$('#verifPrenom').text('');
}
});

Dans les écouteurs d’événements, le code vérifie la longueur de la valeur du champ de saisie à l’aide de this.value.length. Si la longueur est inférieure à 4 caractères pour nom ou inférieure à 3 caractères pour prenom, il affiche un message d’erreur.

Si la valeur du champ de saisie est trop courte, le code définit le contenu textuel de l’élément de message d’erreur correspondant (#verifNom ou #verifPrenom) sur un message d’erreur spécifique.

Si la valeur du champ de saisie est suffisamment longue, le code efface le message d’erreur en définissant le contenu textuel de l’élément de message d’erreur sur une chaîne vide.

En résumé, ce code vérifie la longueur des champs de saisie nom et prenom à chaque relâchement de touche et affiche un message d’erreur si la saisie est trop courte. Si la saisie est suffisamment longue, il efface le message d’erreur. Cela permet de rendre le formulaire plus interactif.

En somme, grâce à cette exploration complète des événements jQuery, nous avons découvert les vastes capacités que jQuery apporte, vous permettant ainsi de créer des applications Web enrichies et interactives.

Nous avons approfondi les mécanismes de gestion des événements que jQuery simplifie, en illustrant les événements clés tels que les actions du clavier à travers des exemples pratiques.

Il est important de noter que, bien que ce guide ait pour objectif de vous doter des connaissances nécessaires pour maîtriser la gestion des événements jQuery, c’est l’application de ces concepts dans des scénarios réels qui améliore véritablement les compétences en développement.

Méthode	Description
.keydown()	Attache un gestionnaire d’événements pour l’événement keydown (lorsqu’une touche du clavier est enfoncée).
.keyup()	Attache un gestionnaire d’événements pour l’événement keyup (lorsqu’une touche du clavier est relâchée).
.keypress()	Attache un gestionnaire d’événements pour l’événement keypress (lorsqu’une touche du clavier est enfoncée et maintenue).Note: Cet événement est désormais déprécié, il est recommandé d’utiliser .keydown() ou .keyup() à la place.
.focus()	Attache un gestionnaire d’événements pour l’événement focus (lorsqu’un élément de formulaire reçoit le focus) ou déclenche cet événement sur un élément sélectionné.
.blur()	Attache un gestionnaire d’événements pour l’événement blur (lorsqu’un élément de formulaire perd le focus) ou déclenche cet événement sur un élément sélectionné.
.change()	Attache un gestionnaire d’événements pour l’événement change (lorsque la valeur d’un élément de formulaire change, tel qu’un champ de texte ou une liste déroulante) ou déclenche cet événement sur un élément sélectionné.
.submit()	Attache un gestionnaire d’événements pour l’événement submit (lorsqu’un formulaire est soumis) ou déclenche cet événement sur un formulaire sélectionné.

Découvrez ci-dessous un aperçu interactif des exercices grâce à l’intégration du CodePen, où vous pouvez tester et explorer le code directement :

See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.

Formez-vous gratuitement avec Alphorm !

Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.

FAQ

Que sont les événements jQuery?

Les événements jQuery sont des actions détectées par le navigateur qui peuvent déclencher une réponse dans le code. Ils sont essentiels pour créer des interactions dynamiques sur les pages Web. En utilisant jQuery, les développeurs peuvent gérer facilement des événements comme les clics de souris, les pressions de touches, et plus encore, rendant les applications Web plus réactives et engageantes.

Comment utiliser la méthode keydown en jQuery?

La méthode keydown en jQuery est utilisée pour détecter quand une touche du clavier est enfoncée sur un élément actif. Cette méthode peut être utilisée pour capturer la saisie utilisateur et effectuer des actions spécifiques, comme valider des données ou contrôler le comportement de l’application. Par exemple, en utilisant $(‘#element’).keydown(function() {…});, vous pouvez exécuter du code chaque fois qu’une touche est pressée sur l’élément ciblé.

Quelle est la différence entre keydown et keyup?

La différence entre keydown et keyup réside dans le moment où l’événement est déclenché. L’événement keydown est déclenché lorsque l’utilisateur appuie sur une touche du clavier, tandis que keyup se déclenche lorsque la touche est relâchée. Ces événements permettent de capturer différentes interactions utilisateur, keydown pour le début de la saisie et keyup pour la fin, offrant ainsi des possibilités pour contrôler le comportement des applications Web.

Comment les événements jQuery améliorent-ils l'interactivité Web?

Les événements jQuery améliorent l’interactivité Web en permettant de réagir dynamiquement aux actions des utilisateurs. En gérant des actions comme les clics de souris et les saisies clavier, jQuery facilite la création d’applications Web réactives, offrant une expérience utilisateur enrichie. Par exemple, des formulaires peuvent valider les entrées en temps réel, et les éléments de la page peuvent changer d’apparence selon les interactions, rendant les sites plus engageants.

Quelles sont les meilleures pratiques pour utiliser les événements clavier en jQuery?

Pour utiliser efficacement les événements clavier en jQuery, il est conseillé de cibler uniquement les éléments nécessaires et de minimiser le code à l’intérieur des gestionnaires d’événements pour des performances optimales. Utilisez keydown pour capturer les saisies initiales et keyup pour vérifier les valeurs finales. Testez les interactions sur différents navigateurs pour assurer une compatibilité maximale. Assurez-vous que les éléments ciblés ont le focus pour que les événements soient correctement détectés.

Conclusion

En maîtrisant les événements jQuery, vous pouvez transformer vos applications Web en expériences utilisateur dynamiques et engageantes. Comment intégrez-vous les événements jQuery dans vos projets actuels pour maximiser l’interactivité?

Événements jQuery pour plus d’interactivité Web