Événements focus et blur en JavaScript

JavaScript est un langage polyvalent qui peut améliorer l'interactivité des applications web. L'un des domaines clés où JavaScript excelle est la gestion des saisies utilisateur grâce aux événements focus et blur. Cet article explore en profondeur comment utiliser efficacement ces événements pour améliorer la gestion des formulaires, la validation des saisies et l'expérience utilisateur globale.

Comprendre focus et blur en JavaScript

L'événement focus se produit lorsqu'un élément devient la cible active des frappes au clavier et des clics de souris. À l'inverse, l'événement blur se déclenche lorsqu'un élément perd le focus. Ces deux événements sont cruciaux pour la validation des formulaires et les champs de saisie dynamiques. Notez que focus et blur ne remontent pas dans le DOM (ne bubblent pas). Si vous avez besoin de délégation d'événements, utilisez plutôt focusin et focusout.

Comment implémenter les événements focus

Pour utiliser l'événement focus, vous pouvez attacher un écouteur d'événement à un élément. Voici un exemple d'ajout d'un événement focus à un champ de saisie qui le met en surbrillance lorsqu'il reçoit le focus :

---

<input type="text" id="nameInput" placeholder="Enter Your Name">
<script>
  document.getElementById('nameInput').addEventListener('focus', function(event) {
    event.target.style.backgroundColor = 'lightblue';
  });
</script>

Try it Yourself »

Ce bout de code définit le fond du champ de saisie en bleu clair lorsqu'il est focus, améliorant l'interface utilisateur en indiquant clairement où l'utilisateur saisit du texte. Pour un style simple, privilégiez la pseudo-classe CSS `:focus` comme alternative standard sans JavaScript :

input:focus {
  background-color: lightblue;
}

Comment implémenter les événements blur

De même, l'événement blur peut être utilisé pour valider la saisie lorsque l'utilisateur quitte un champ spécifique. Voici comment valider une adresse e-mail lorsque le champ de saisie perd le focus :

---

<input type="email" id="emailInput" placeholder="Enter Your Email">
<script>
  document.getElementById('emailInput').addEventListener('blur', function(event) {
    // Simplified regex for educational purposes
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(event.target.value)) {
      alert('Please enter a valid email address.');
      event.target.style.backgroundColor = 'salmon';
    } else {
      event.target.style.backgroundColor = 'lightgreen';
    }
  });
</script>

Try it Yourself »

Ce script vérifie si l'e-mail saisi correspond à un format standard et alerte l'utilisateur en cas de saisie invalide. La couleur de fond passe au vert si elle est valide et au saumon si elle ne l'est pas, offrant un retour visuel immédiat.

Techniques avancées : gestion de plusieurs champs

Lorsqu'un utilisateur remplit correctement un champ de formulaire, vous pouvez automatiquement déplacer le focus vers le champ de saisie suivant dès que le champ actuel perd le focus. Cela simplifie le remplissage du formulaire en supprimant le besoin de clics manuels. Voici comment implémenter ce comportement :

---

<input type="text" id="firstName" placeholder="First Name" />
<input type="text" id="lastName" placeholder="Last Name" />
<div id="error" style="color: red;"></div> <!-- Display error message here -->
<script>
  document.getElementById('firstName').addEventListener('blur', validateFirstName);

  function validateFirstName(event) {
    const input = event.target;
    const errorDiv = document.getElementById('error');
    // Allow only letters and spaces, must not be empty
    const nameRegex = /^[A-Za-z ]+$/;
    if (!nameRegex.test(input.value)) {
      errorDiv.textContent = 'Please enter a valid first name.'; // Display error message
      input.style.backgroundColor = 'salmon'; // Set background to salmon on invalid input
      input.focus(); // Keep focus on the first name input to encourage correction
    } else {
      input.style.backgroundColor = 'white'; // Reset background to white on valid input
      errorDiv.textContent = ''; // Clear error message
      document.getElementById('lastName').focus(); // Optionally move focus to the last name input
    }
  }
</script>

Try it Yourself »

Cet exemple déplace automatiquement le focus vers le champ lastName dès qu'un prénom valide est saisi, améliorant l'expérience utilisateur en réduisant le besoin de clics manuels.

Conclusion

Maîtriser l'utilisation des événements focus et blur en JavaScript peut considérablement améliorer la fonctionnalité et la réactivité des pages web. En implémentant ces techniques, les développeurs peuvent créer des formulaires et des applications plus interactifs et conviviaux. Ce guide fournit non seulement des exemples de code pratiques, mais offre également un aperçu des puissantes capacités de JavaScript dans la gestion des interactions utilisateur.

Pratique

Parmi les affirmations suivantes, lesquelles sont correctes concernant les événements focus et blur en JavaScript ?

L'événement focus est déclenché lorsqu'un élément reçoit le focus, que ce soit par un clic de souris ou par la navigation au clavier (tabulation).L'événement blur est déclenché lorsqu'un élément perd le focus, ce qui peut se produire en cliquant à l'extérieur de l'élément.Vous pouvez empêcher un élément de perdre le focus en utilisant la méthode event.preventDefault() dans le gestionnaire d'événement blur.Les événements focus et blur peuvent être appliqués par défaut à n'importe quel élément HTML sans attributs supplémentaires.En utilisant 'tabindex', vous pouvez activer les événements focus et blur sur des éléments non interactifs comme <div> et <span>.