Recomendaciones de cursos:
Evento onfocusout
Definición y uso
Aunque Firefox no admite el evento onfocusout, puede entender si los elementos hijos pierden el foco utilizando el listener de captura del evento onblur (usando el parámetro opcional useCapture del método addEventListener()). El evento onfocusout ocurre cuando un elemento está a punto de perder el foco. Evento onblurEl evento onfocusout es similar a
Aunque Firefox no admite el evento onfocusout, puede entender si los elementos hijos pierden el foco utilizando el listener de captura del evento onblur (usando el parámetro opcional useCapture del método addEventListener()).. La principal diferencia está en que el evento onblur no burbujea. Por lo tanto, si desea determinar si un elemento o uno de sus elementos hijos pierde el foco, debe usar el evento onfocusout.
Aunque Firefox no admite el evento onfocusout, puede entender si los elementos hijos pierden el foco utilizando el listener de captura del evento onblur (usando el parámetro opcional useCapture del método addEventListener()). Consejo: Evento onfocusinEl evento onfocusout es similar a
Al revés.
Ejemplo
Ejemplo 1
Ejecutar JavaScript cuando el campo de entrada esté a punto de perder el foco:
<input type="text" onfocusout="myFunction()">
Más ejemplos TIY en la parte inferior de la página.
Sintaxis
En HTML:< element.addEventListener("focusout",onfocusout="
">
En JavaScript, utilice el método addEventListener():En JavaScript (puede no funcionar como se espera en Chrome, Safari y Opera 15+):.addEventListener("focusout",.onfocusout = function(){
};
En JavaScript, utilice el método addEventListener():object .addEventListener("focusout",myScript
Notas:); Internet Explorer 8 o versiones anteriores no lo admitenMétodo addEventListener()
.
| Detalles técnicos: | Compatibilidad |
|---|---|
| Burbujeante: | Cancelable: |
| No soportado: | FocusEvent |
| Etiquetas HTML admitidas: | Todos los elementos HTML, excepto: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title> |
| Versión del DOM: | Eventos de Nivel 2 |
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que admite completamente el evento.
| Evento | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onfocusout | Compatibilidad | Compatibilidad | 52.0 | Compatibilidad | Compatibilidad |
Notas:El evento onfocusout puede no funcionar como se espera en Chrome, Safari y Opera 15+, pero debe utilizarse como atributo HTML y con el método addEventListener() (véase el ejemplo de sintaxis a continuación).
Más ejemplos
Ejemplo 2
Uso conjunto de eventos "onfocusin" y "onfocusout":
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Ejemplo 3
Delegación de eventos: establecer el parámetro useCapture de addEventListener() en true (usado para focus y blur):
<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 4
Delegación de eventos: utilizando el evento focusin:
<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>
