Los últimos tutoriales de desarrollo web
 

Evento onfocusout

<Objeto de evento

Ejemplo

Ejecutar un JavaScript cuando un campo de entrada está a punto de perder el foco:

<input type="text" onfocusout="myFunction()">
Inténtalo tú mismo "

Más "Try it Yourself" ejemplos a continuación.

Definición y Uso

El evento onfocusout se produce cuando un elemento está a punto de perder el foco.

Consejo: El evento onfocusout es similar a la onBlur 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 debe utilizar el evento onfocusout.

Consejo: Aunque Firefox no soporta el evento onfocusout, se puede averiguar si un hijo de un elemento pierde el foco o no, mediante el uso de un oyente para la captura onBlur evento (utilizando el parámetro opcional de la useCapture addEventListener() método).

Tip: El evento onfocusout es lo contrario de la onfocusin evento.

Soporte del navegador

Evento
onfocusout Sí Sí No soportado Sí Sí

Nota: El evento onfocusout puede no funcionar como se espera en Chrome, Safari y Opera 15+ utilizando la sintaxis de JavaScript HTML DOM. Sin embargo, debería funcionar como un atributo HTML y utilizando el addEventListener() método.

Sintaxis

En HTML:

< Inténtalo tú mismo "

En JavaScript (may not work as expected in Chrome, Safari and Opera 15+) :

object .onfocusout=function(){ Inténtalo tú mismo "

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

object .addEventListener("focusout", myScript );
Inténtalo tú mismo "

Nota: El addEventListener() método no es compatible en Internet Explorer 8 y versiones anteriores.

Detalles técnicos

burbujas: Sí
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
Ejemplos

Más ejemplos

Ejemplo

El uso de "onfocusin" junto con el "onfocusout" evento:

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Inténtalo tú mismo "

Ejemplo

Delegación de eventos: establecer el parámetro de useCapture addEventListener() true (for focus and 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>
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