Ejemplo
Ejecutar un JavaScript cuando un usuario abandona un campo de entrada:
<input type="text" onblur="myFunction()">
Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
El evento onBlur se produce cuando un objeto pierde el foco.
El evento onblur es la más utilizada con el código de validación de formularios (por ejemplo, cuando el usuario sale de un campo de formulario).
Tip: El evento onBlur es lo contrario de la onfocus evento.
Consejo: El evento onBlur es similar a la onfocusout evento. La diferencia principal es que el evento onBlur no burbujea. Por lo tanto, si desea averiguar si un elemento o su niño deja de estar seleccionado, se puede utilizar el evento onfocusout. Sin embargo, se puede lograr esto mediante el parámetro opcional de la useCapture addEventListener() método para el evento onBlur.
Soporte del navegador
| Evento | |||||
|---|---|---|---|---|---|
| onblur | Sí | Sí | Sí | Sí | Sí |
Sintaxis
En HTML:
En JavaScript:
object .onblur=function(){ Inténtalo tú mismo " En JavaScript, utilizando el addEventListener() método:
object .addEventListener("blur", myScript );
Inténtalo tú mismo " Nota: El addEventListener() método no es compatible en Internet Explorer 8 y versiones anteriores.
Detalles técnicos
| burbujas: | No |
|---|---|
| cancelable: | No |
| Tipo de evento: | FocusEvent |
| etiquetas HTML admitidas: | Todos los elementos HTML, excepto: <base>, <BDO>, España, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title> |
| DOM Versión: | Nivel 2 Eventos |
Más ejemplos
Ejemplo
El uso de "onblur" junto con el "onfocus" evento:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Inténtalo tú mismo " Ejemplo
Delegación de eventos: establecer el parámetro de useCapture 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>
Inténtalo tú mismo " Ejemplo
delegación de eventos: cómo utilizar el evento focusin (no soportado por 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>
Inténtalo tú mismo " <Objeto de evento