Evento onblur

Eventos DOM FocusEvent

Definición y uso

El evento onblur ocurre cuando un objeto pierde el enfoque.

El evento onblur se utiliza con mayor frecuencia junto con el código de validación de formularios (por ejemplo, cuando el usuario sale de un campo de formulario).

Consejo: El evento onblur es similar a Evento onfocusPor el contrario.

Consejo: El evento onblur es similar a Evento onfocusout.La principal diferencia radica en que el evento onblur no se propaga. Por lo tanto, si desea determinar si un elemento o uno de sus subelementos ha perdido el enfoque, puede usar el evento onfocusout. Sin embargo, puede usar el evento onblur del Método addEventListener()el parámetro useCapture (opcional) para lograr esto.

Ejemplo

Ejecutar JavaScript cuando el usuario salga del campo de entrada:

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

Prueba personalmente

Hay más ejemplos TIY en la parte inferior de la página.

Sintaxis

En HTML:

<element onblur="myScript">

Prueba personalmente

En JavaScript:

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

Prueba personalmente

En JavaScript, usar el método addEventListener():

objeto.addEventListener("blur", myScript);

Prueba personalmente

Notas:Internet Explorer 8 o versiones anteriores no son compatibles Método addEventListener().

Detalles técnicos

Burbujeo: No compatible
Cancelable: No compatible
Tipo de evento: FocusEvent
Etiquetas HTML compatibles: Todos los elementos HTML, excepto: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title>
Versión DOM: Nivel 2 eventos

Compatibilidad del navegador

Evento Chrome IE Firefox Safari Opera
onblur Compatibilidad Compatibilidad Compatibilidad Compatibilidad Compatibilidad

Más ejemplos

Ejemplo

Usar "onblur" y "onfocus" eventos juntos:

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

Prueba personalmente

Ejemplo

Delegación de eventos: establecer el parámetro "useCapture" de addEventListener() en 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>

Prueba personalmente

Ejemplo

Delegación de eventos: usar el evento "focusin" (no es compatible con 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>

Prueba personalmente

Eventos DOM FocusEvent