Los últimos tutoriales de desarrollo web
 

Evento onfocusin

<Objeto de evento

Ejemplo

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

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

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

Definición y Uso

El evento onfocusin se produce cuando un elemento está a punto de obtener el foco.

Consejo: El evento onfocusin es similar a la onfocus evento. La diferencia principal es que el evento onfocus no burbujea. Por lo tanto, si desea averiguar si un elemento o su hijo reciba el foco, se debe utilizar el evento onfocusin.

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

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

Soporte del navegador

Evento
onfocusin Sí Sí No soportado Sí Sí

Nota: El evento onfocusin 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 .onfocusin=function(){ Inténtalo tú mismo "

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

object .addEventListener("focusin", 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