oujood.com

  HTML, attribut d’événements onblur

L'événements onblur se déclenche au moment où l'élément perd le focus. L’événements Onblur est souvent utilisé avec le code de validation de formulaire

chercher |

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>

Appui de navigateur

Internet Explorer FirefoxOperaGoogle ChromeSafari
L'attribut d'événement onblur est pris en charge dans tous les principaux navigateurs.


Différences entre HTML 4.01 et HTML5

Aucune.

 Retour à la Liste attribut d'événement 

    
Accueil du site


Par carabde 10 mars 2014



Voir aussi nos tutoriel :

Espaces de noms XML

Espaces de noms XML

border-bottom-style

Définit le style de la bordure inférieure

Balise menu

Définit une liste / menu de commandes