Evento onblur
Ejemplo
Ejecute un JavaScript cuando un usuario abandone un campo de entrada:
<input type="text" onblur="myFunction()">
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
El evento onblur ocurre cuando un objeto pierde el foco.
El evento onblur se usa con mayor frecuencia con el código de validación de formulario (por ejemplo, cuando el usuario abandona un campo de formulario).
Sugerencia: El evento onblur es lo opuesto al evento onfocus .
Sugerencia: el evento onblur es similar al evento onfocusout . La principal diferencia es que el evento onblur no burbujea. Por lo tanto, si desea averiguar si un elemento o su hijo pierden el foco, puede utilizar el evento onfocusout. Sin embargo, puede lograr esto usando el parámetro opcional useCapture del método addEventListener() para el evento onblur.
Compatibilidad con navegador
| Event | |||||
|---|---|---|---|---|---|
| onblur | Yes | Yes | Yes | Yes | Yes |
Sintaxis
En HTML:
<element onblur="myScript">
En JavaScript:
object.onblur = function(){myScript};
En JavaScript, usando el método addEventListener():
object.addEventListener("blur", myScript);
Nota: el método addEventListener() no es compatible con Internet Explorer 8 y versiones anteriores.
Detalles técnicos
| Burbujas: | No |
|---|---|
| Cancelable: | No |
| Tipo de evento: | Evento de enfoque |
| Etiquetas HTML compatibles: | TODOS los elementos HTML, EXCEPTO: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title> |
| Versión DOM: | Eventos de nivel 2 |
Más ejemplos
Ejemplo
Usando "onblur" junto con el evento "onfocus":
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Ejemplo
Delegación de eventos: establecer el parámetro useCapture de addEventListener() en verdadero:
<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>
Ejemplo
Delegación de eventos: utilizando el evento focusin (no 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>