HTML, attribut d’événements onblur

Définition et utilisation événements onblur

LES BALISES HTML

L'événement "onblur" est un événement JavaScript qui se déclenche lorsque l'élément perd le focus, c'est-à-dire lorsque l'utilisateur quitte l'élément actuellement sélectionné. Cet événement est souvent utilisé avec les éléments de formulaire tels que les champs de texte, les zones de texte, etc.

Voici une brève explication de l'utilisation de l'événement "onblur" :

1. **HTML :**

   <input type="text" id="monChamp" onblur="maFonction()">

Dans cet exemple, lorsque l'utilisateur quitte le champ de texte, la fonction "maFonction()" sera appelée.

2. **JavaScript :**

Exemple : Copier le code


   function maFonction() {
       // Code à exécuter lorsque l'élément perd le focus
       console.log("Champ de texte a perdu le focus !");
   }

L'événement "onblur" est souvent utilisé pour effectuer des validations en temps réel, par exemple, pour vérifier si le contenu d'un champ de texte est correct après que l'utilisateur a terminé de le remplir. Vous pouvez également l'utiliser pour déclencher d'autres actions lorsque l'utilisateur quitte un champ particulier.

Voici un exemple plus concret où l'on vérifie si le champ de texte est vide après que l'utilisateur a quitté le champ :

Exemple : Copier le code


<input type="text" id="monChamp" onblur="validerChamp()">
<div id="messageErreur"></div>

<script>
    function validerChamp() {
        var champ = document.getElementById("monChamp");
        var messageErreur = document.getElementById("messageErreur");

        if (champ.value === "") {
            messageErreur.innerHTML = "Le champ ne peut pas être vide.";
        } else {
            messageErreur.innerHTML = "";
        }
    }
</script>

Dans cet exemple, la fonction `validerChamp()` est appelée lorsque l'utilisateur quitte le champ de texte, et elle vérifie si le champ est vide. Si c'est le cas, un message d'erreur est affiché.

astuce Astuce : L'attribut onblur est le contraire de l'attribut onfocus .
Syntaxe

<input onblur ="script" />
Valeurs d'attribut

Valeur	Description
script	Le script à exécuter sur onblur

Exemple Valider un champ de saisie, lorsque l'utilisateur le quitte :

Exemple : Copier le code

  <!DOCTYPE html> 
  <html> 
  <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>html5 demo</title> 
  <script> 
  function majuscule() 
  { 
  var x=document.getElementById("nom").value 
  document.getElementById("nom").value=x.toUpperCase() 
  } 
  </script> 
  </head> 
  <body> 
    
  <h4>Entrez votre nom puis appuyer sur la touche tab ou cliquer en dehors du
  champs Nom :</h4> 
  Nom : <input type="text" name="nom" id="nom"   onblur ="majuscule()"> 
    
  </body> 
  </html>