Comprendre les événements jQuery focus et blur

Les formulaires web peuvent souvent manquer de clarté et de retour visuel, rendant l’expérience utilisateur confuse.

Cela peut entraîner des erreurs de saisie et une frustration pour l’utilisateur qui ne sait pas quels champs sont actifs.

L’utilisation des événements focus et blur en jQuery offre une solution simple et efficace pour améliorer l’interaction utilisateur et guider visuellement l’utilisateur à travers vos formulaires.

Table de matière

jQuery Focus : Utiliser la Méthode Focus()jQuery Blur : Utiliser la Méthode Blur()Événements jQuery : Focus et Blur en Action FAQ Conclusion

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

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

jQuery Focus : Utiliser la Méthode Focus()

L’événement jQuery focus() est utilisé pour lier un gestionnaire d’événements à l’événement « focus » des éléments sélectionnés. La méthode focus() peut être utilisée avec n’importe quel élément HTML qui accepte le focus, comme les champs de formulaire (input, textarea, select), les liens et les boutons.

jQuery Blur : Utiliser la Méthode Blur()

L’événement. blur() dans jQuery est déclenché lorsqu’un élément perd le focus, généralement lorsqu’un utilisateur clique en dehors de l’élément ou passe à un autre élément. C’est l’inverse de l’événement. focus(), qui est déclenché lorsqu’un élément obtient le focus.

Et maintenant, passons à l’application de ces deux méthodes afin de mieux comprendre son utilité.

Événements jQuery : Focus et Blur en Action

Toujours en s’appuyant sur le premier exercice histoire de ne pas tout refaire.

L’idée de l’application sera donc de lier un gestionnaire d’événements focus() à tous les éléments d’entrée du formulaire, ce qui modifiera la couleur d’arrière-plan des éléments prénom et nom en orange lorsqu’ils recevront le focus et par conséquent retrouver leurs couleurs initiales à la réception de la méthode blur.

Voici donc le code nécessaire pour réaliser 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>
<link rel="stylesheet" href="css/style.css">
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.jet-image-accordion__item-loader span{--wpr-bg-cd5ef084-e88b-4572-ae86-c9b88b6a32cb: url('https://blog.alphorm.com/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}.rll-youtube-player .play{--wpr-bg-3d48d585-abd2-4b2e-adc4-216ea9f4fc0d: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-cd5ef084-e88b-4572-ae86-c9b88b6a32cb: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"cd5ef084-e88b-4572-ae86-c9b88b6a32cb","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-3d48d585-abd2-4b2e-adc4-216ea9f4fc0d: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"3d48d585-abd2-4b2e-adc4-216ea9f4fc0d","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">
<div>
<label for="prenom">prénom</label>
<input type="text" id="prenom">
</div>
<div>
<label for="nom">nom</label>
<input type="text" id="nom">
</div>
</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":"ae2885431f","url":"https:\/\/blog.alphorm.com\/evenements-jquery-focus-blur","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;
}
form div {
width: 350px;
margin-bottom: 12px;
display:flex;
}
form label {
color: #ecf0f1;
background-color: #bdc3c7;
text-transform: capitalize;
padding: 10px 15px;
font-size: 1.2rem;
width: 200px;
border-radius: 5px 0 0 5px;
}
form input {
border-radius: 0 5px 5px 0;
outline: none;
border: 1px solid #bdc3c7;
font-size: 1.6rem;
padding-left: 10px;
width: 100%;
}

Code JavaScript :

				
					
 $(document).ready(function() {
$('#prenom').focus(function() {
$('label[for="prenom"]').css({
'background-color': '#d35400',
'color': '#f1c40f',
'border-color': '#d35400'
});
});
$('#prenom').blur(function() {
$('label[for="prenom"]').css({
'background-color': '#bdc3c7',
'color': '#ecf0f1',
'border-color': '#bdc3c7'
});
});
$('#nom').focus(function() {
$('label[for="nom"]').css({
'background-color': '#d35400',
'color': '#f1c40f',
'border-color': '#d35400'
});
});
$('#nom').blur(function() {
$('label[for="nom"]').css({
'background-color': '#bdc3c7',
'color': '#ecf0f1',
'border-color': '#bdc3c7'
});
});
});

Alors, lorsque #prenom reçoit le focus, l’étiquette avec for= »prenom » aura sa :

couleur d’arrière-plan définie sur une couleur orange foncé

couleur définie sur une couleur orange clair

couleur de bordure définie sur la même couleur orange foncé

Par contre, lorsque #prenom perd le focus, l’étiquette avec for= »prenom » aura ses couleurs initiales :

Cet exemple modifie la couleur d’arrière-plan d’un champ de saisie lorsqu’il obtient le focus, fournissant ainsi un retour visuel à l’utilisateur. À l’inverse, l’événement blur() est déclenché lorsqu’un élément perd le focus. Cela est utile pour la validation et la mise en forme des données lorsque l’utilisateur s’éloigne d’un champ de saisie spécifique.

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

Qu'est-ce que l'événement focus en jQuery?

L’événement focus en jQuery permet de lier un gestionnaire d’événements à l’instant où un élément reçoit le focus. Cela peut améliorer l’interaction utilisateur en modifiant des éléments comme la couleur d’arrière-plan des champs de formulaire lorsqu’ils sont sélectionnés. Par exemple, dans un formulaire, un champ de saisie peut changer de couleur pour indiquer qu’il est actif et prêt à recevoir une entrée.

Comment fonctionne l'événement blur en jQuery?

L’événement blur en jQuery se déclenche lorsqu’un élément perd le focus. Cela se produit généralement lorsqu’un utilisateur clique en dehors de l’élément ou passe à un autre champ. Cet événement est utile pour effectuer des vérifications ou des modifications lorsque l’utilisateur termine la saisie dans un champ, comme la validation des données saisies avant de passer à un autre champ.

Comment appliquer les méthodes focus et blur dans un formulaire?

Pour appliquer les méthodes focus et blur dans un formulaire, vous pouvez utiliser jQuery pour changer dynamiquement les styles des éléments lorsqu’ils gagnent ou perdent le focus. Par exemple, en utilisant $(‘#prenom’).focus(), vous pouvez modifier la couleur d’arrière-plan du champ de saisie. Ensuite, avec $(‘#prenom’).blur(), vous rétablissez la couleur d’origine lorsque le focus est perdu.

Quels sont les avantages d'utiliser focus et blur?

Les événements focus et blur offrent un retour visuel immédiat à l’utilisateur et permettent de valider les données en temps réel. En modifiant l’apparence d’un champ de saisie lorsqu’il est actif ou inactif, on améliore l’expérience utilisateur. De plus, en validant les entrées lorsque le focus est perdu, on s’assure de la cohérence et de l’exactitude des données saisies.

Peut-on personnaliser les styles lors des événements focus et blur?

Oui, en jQuery, vous pouvez facilement personnaliser les styles CSS lors des événements focus et blur. En utilisant la méthode .css(), vous pouvez modifier des propriétés telles que la couleur d’arrière-plan, la couleur du texte et la couleur des bordures pour signaler visuellement à l’utilisateur qu’un élément est actif ou inactif.

Conclusion

En comprenant et en appliquant correctement les événements focus et blur en jQuery, vous pouvez considérablement améliorer l’interaction utilisateur de vos applications web. Quelle autre fonctionnalité jQuery souhaitez-vous explorer pour perfectionner vos compétences en développement web?