Événement onblur

Événements DOM FocusEvent

Définition et utilisation

L'événement onblur se produit lorsque l'objet perd le focus.

L'événement onblur est souvent utilisé avec le code de validation des formulaires (par exemple, lorsque l'utilisateur quitte un champ de formulaire).

Astuce : L'événement onblur est similaire à Événement onfocusAu contraire.

Astuce : L'événement onblur est similaire à Événement onfocusout. La principale différence réside dans le fait que l'événement onblur ne se propage pas. Par conséquent, si vous souhaitez déterminer si un élément ou l'un de ses éléments enfants a perdu le focus, vous pouvez utiliser l'événement onfocusout. Cependant, vous pouvez utiliser l'événement onblur en Méthode addEventListener()le paramètre useCapture (optionnel) pour cela.

Exemple

Exécutez JavaScript lorsque l'utilisateur quitte le champ d'entrée :

<input type="text" onblur="myFunction()">

Essayez vous-même

Vous trouverez plus d'exemples TIY en bas de la page.

Syntaxe

En HTML :

<element onblur="myScript">

Essayez vous-même

En JavaScript :

object.onblur = function(){}myScript};

Essayez vous-même

Dans JavaScript, utilisez la méthode addEventListener() :

object.addEventListener("blur", myScript);

Essayez vous-même

Remarque :Internet Explorer 8 et versions antérieures ne prennent pas en charge Méthode addEventListener().

Détails techniques

Bubbling : Non pris en charge
Annulable : Non pris en charge
Type d'événement : FocusEvent
Balises HTML prises en charge : 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

Prise en charge du navigateur

Événement Chrome IE Firefox Safari Opera
onblur Supporte Supporte Supporte Supporte Supporte

Plus d'exemples

Exemple

Utilisez ensemble "onblur" et "onfocus" événements :

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">

Essayez vous-même

Exemple

La délégation d'événements : réglez le 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>

Essayez vous-même

Exemple

La délégation d'événements : utilisez l'événement focusin (non supporté 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

Événements DOM FocusEvent