onfocusoutEvento
Objeto de eventoEjemplo
Ejecutar JavaScript cuando el campo de entrada input esté a punto de perder el foco:
Pruébalo »
Este capítulo contiene más ejemplos al final.
Definición y uso
El evento onfocusout se activa cuando un elemento está a punto de perder el foco.
Consejo:El evento onfocusout es similar alonblurevento. La principal diferencia es que el evento onblur no admite bubbling (propagación). Por lo tanto, si necesitas comprobar si un elemento o sus elementos secundarios pierden el foco, debes usar el evento onfocusout.
Consejo:Aunque Firefox no admite el evento onfocusout, puedes usaronfocus(usando el parámetro opcional del método addEventListener()useCapture) con un evento de captura para comprobar si un elemento o sus elementos secundarios han perdido el foco.
Consejo:El evento opuesto al evento onfocusout es elonfocusinevento.
Soporte del navegador
| Evento | |||||
|---|---|---|---|---|---|
| onfocusout | Yes | Yes | Yes | Yes | Yes |
Nota:En los navegadores Chrome, Safari y Opera 15+, el evento onfocusin con la sintaxis HTML DOM puede no funcionar correctamente. Sin embargo, como un elemento HTML, puede funcionar correctamente mediante el método addEventListener().
Sintaxis
En HTML:
En JavaScript (puede que no funcione correctamente en Chrome, Safari y Opera 15+):
En JavaScript, usando el método addEventListener():
Nota:Internet Explorer 8 y versiones anteriores de IE no admitenaddEventListener()el método.
Detalles técnicos
| ¿Admite bubbling (propagación)? | Yes |
|---|---|
| ¿Se puede cancelar? | No |
| Tipo de evento: | FocusEvent |
| Etiquetas HTML compatibles: | Todos los elementos HTML, excepto: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title> |
Más ejemplos
Ejemplo
Usar los eventos "onfocusin" y "onfocusout":
Pruébalo »
Ejemplo
Delegación de eventos: establecer el parámetro de addEventListener()useCaptureen true (para obtener y perder el foco):
<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>
Pruébalo »
Ejemplo
Delegación de eventos: usar el evento focusout (no compatible con el navegador Firefox):
<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>
Pruébalo »
Otras extensiones