Exemple
Exécuter un script JavaScript lorsqu'un utilisateur quitte un champ d'entrée:
<input type="text" onblur="myFunction()">
Essayez vous - même » Plus "Try it Yourself" - "Try it Yourself" exemples 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).
Tip: L'événement onblur est à l'opposé du onfocus événement.
Astuce: L'événement onblur est similaire à l' onfocusout événement. La principale différence est que l'événement onblur ne bouillonne pas. Par conséquent, si vous voulez savoir si un élément ou son enfant perd le focus, vous pouvez utiliser l'événement onfocusout. Cependant, vous pouvez le faire en utilisant le paramètre optionnel useCapture du addEventListener() méthode pour l'événement onblur.
Support du navigateur
| un événement | |||||
|---|---|---|---|---|---|
| onblur | Oui | Oui | Oui | Oui | Oui |
Syntaxe
En HTML:
< Essayez vous - même » JavaScript:
object .onblur=function(){ Essayez vous - même » En JavaScript, en utilisant la addEventListener() méthode:
object .addEventListener("blur", myScript );
Essayez vous - même » Note: Le addEventListener() méthode est pas prise en charge dans Internet Explorer 8 et les versions antérieures.
Détails techniques
| Bulles: | Non |
|---|---|
| cancelable: | Non |
| Type d'événement: | FocusEvent |
| Pris en charge les balises HTML: | Tous les éléments HTML, SAUF: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> et <title> |
| DOM Version: | Niveau 2 Événements |
autres exemples
Exemple
En utilisant "onblur" ainsi que le "onfocus" l' événement:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Essayez vous - même » Exemple
Délégation de l' événement: régler le paramètre useCapture de addEventListener() 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>
Essayez vous - même » Exemple
délégation de l'événement: utiliser 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>
Essayez vous - même » <Object Event