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.
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>
<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-194cfc24-038a-432a-9ef8-d3b5450dad50: 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-194cfc24-038a-432a-9ef8-d3b5450dad50: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"194cfc24-038a-432a-9ef8-d3b5450dad50","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":"3db1e4ff05","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?
Comment fonctionne l'événement blur en jQuery?
Comment appliquer les méthodes focus et blur dans un formulaire?
Quels sont les avantages d'utiliser focus et blur?
Peut-on personnaliser les styles lors des événements focus et blur?
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?
