Événement flou
Exemple
Exécutez un JavaScript lorsqu'un utilisateur quitte un champ de saisie :
<input type="text" onblur="myFunction()">
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
L'événement onblur se produit lorsqu'un objet perd le focus.
L'événement onblur est le plus souvent utilisé avec le code de validation de formulaire (par exemple lorsque l'utilisateur quitte un champ de formulaire).
Astuce : L'événement onblur est l'opposé de l' événement onfocus .
Conseil : L'événement onblur est similaire à l' événement onfocusout . La principale différence est que l'événement onblur ne bouillonne pas. Par conséquent, si vous souhaitez savoir si un élément ou son enfant perd le focus, vous pouvez utiliser l'événement onfocusout. Cependant, vous pouvez y parvenir en utilisant le paramètre facultatif useCapture de la méthode addEventListener() pour l'événement onblur.
Prise en charge du navigateur
| Event | |||||
|---|---|---|---|---|---|
| onblur | Yes | Yes | Yes | Yes | Yes |
Syntaxe
En HTML :
<element onblur="myScript">
En Javascript :
object.onblur = function(){myScript};
En JavaScript, en utilisant la méthode addEventListener() :
object.addEventListener("blur", myScript);
Remarque : La méthode addEventListener() n'est pas prise en charge dans Internet Explorer 8 et les versions antérieures.
Détails techniques
| Bulles: | Non |
|---|---|
| Annulable : | Non |
| Type d'événement: | FocusEvent |
| Balises HTML compatibles : | TOUS les éléments HTML, SAUF : <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> et <title> |
| Version DOM : | Événements de niveau 2 |
Plus d'exemples
Exemple
Utilisation de "onblur" avec l'événement "onfocus":
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Exemple
Délégation d'événement : définition du paramètre useCapture de addEventListener() sur true :
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
Exemple
Délégation d'événement : utilisation de l'événement focusin (non pris en charge par Firefox) :
<form id="myForm">
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>