onfocus no se llama cuando se utiliza el atributo de enfoque automático en una etiqueta de entrada

Question

En el siguiente ejemplo, obtengo solo un cuadro de alerta. Leí que el foco se pone antes de que se ejecute el código JavaScript. ¿Hay alguna manera de hacer que esto funcione?

<input id="i" type="text" autofocus onfocus="alert(1)"> 

<script type="text/javascript"> 
document.getElementById('i').addEventListener('focus', function() { 
    alert(2); 
}, false); 
</script> 

(Sólo he probado esto en Safari)

Editar: que, obviamente, puede hacerlo de esta manera (PrototypeJS selector):

var autofocusElement = $$('input[autofocus]')[0]; 
callListener(autofocusElement); 

Pero se ve feo en comparación con sólo añadir un oyente de eventos.

Editar:

No se preocupe por la falta de soporte de los navegadores para el atributo de enfoque automático. Se resolvió fácilmente como lo he hecho en los enlaces de violín a continuación. También hay la mejor solución al problema, como puedo ver. Mi pregunta es si puedo hacerlo de una manera menos fea que tener que llamar al oyente de forma manual.

http://jsfiddle.net/tellnes/7TMBJ/3/

Funciona bien en Firefox 3.6 Firefox ya no soporta el enfoque automático. Pero en Safari, que admite autofocus, no se llama al evento.

Answer 1

Desde el HTML5 working draft:

No debe haber más de un elemento en el documento con el atributo autofocus especificado.

Así que está pidiendo un comportamiento indefinido de todos modos.

Con solo un elemento autofocus, en Firefox 3.6, ninguno de los controladores recibe un llamado en la carga de la página. Al asignar manualmente el foco al elemento, se invocan ambos manejadores (luego se procede a un bucle infinito, debido a que los cuadros de alerta devuelven el foco al elemento cuando se cierra).

El proyecto HTML5 sí dice que autofocus debe realizar la focusing steps al cargar la página, incluyendo el aumento del evento focus, pero lo más probable es que los navegadores no están implementando actualmente esa característica de una manera completa y consistente.

Es posible que desee llamar explícitamente a su controlador de eventos focus durante la carga de la página hasta que la especificación de HTML5 haya finalizado y los navegadores comiencen a apuntar para obtener soporte completo.

Answer 2

Si necesita ejecutar una pieza de código JavaScript, onfocus, ya sea para input, se puede usar jQuery: http://api.jquery.com/focus/

Answer 3

El siguiente código de su ejemplo actual:

<input id="i" type="text" autofocus onfocus="alert(1)"> 

<script type="text/javascript"> 
    document.getElementById('i').addEventListener('focus', function() { 
     alert(2); 
    }, false); 
</script> 

va a causar una bucle infinito de alerta que van 1-2

[eidt]

porque: (esto sucede sólo en broswers que apoyan autofocus)

de entrada obtiene el enfoque automático, desencadena el evento que dispara una alerta, juego de alerta se centran, haga clic en Aceptar, juego de entrada foco, foco evento se desencadena nuevo evento desencadenante ahora dos alertas diferentes (DOM completamente cargado ahora se agrega nuevo evento con otra alerta), ambas alertas toman foco, hacen clic en Aceptar, hacen clic en Aceptar, captura de entrada foco dispara nuevo evento activando ahora dos alertas diferentes, alerta toma foco, clic en Aceptar, alerta siguiente toma foco, haga clic en Aceptar, la entrada agarra el foco, activa ambos eventos, la alerta captura el foco, haga clic en Aceptar, la próxima alerta toma el enfoque, haga clic en Aceptar, la entrada captura el foco, dispara los dos eventos, la alerta captura el enfoque, haga clic en Aceptar, la siguiente alerta toma el enfoque, haga clic en Aceptar agarra el foco, dispara los dos eventos, la alerta agarra el foco, hace clic en Aceptar, la próxima alerta agarra el foco, hace clic en Aceptar, la entrada agarra el foco, dispara los dos eventos, ingresa gra bs focus, activa ambos eventos, alerta toma foco, haz clic en ok, próxima alerta toma foco, haz clic en ok, entrada toma foco, dispara en ambos eventos, toma de entrada foco, activa ambos eventos, alerta toma foco, haz clic en ok, siguiente alerta toma foco, haga clic en Aceptar, la captura de entrada enfoca, activa ambos eventos, captura de entrada enfoca, dispara ambos eventos, alerta captura el enfoque, hace clic en Aceptar, la próxima alerta captura el enfoque, hace clic en Aceptar, captura el foco, dispara los dos eventos ...

Descripción textual de un proceso infinito FTW! ....? : P

[/ editar]

En los ejemplos anteriores con dos enfoca automáticamente aplica parece que el último será ejecutado como en el ejemplo que he fijado en la parte inferior. También agregué una forma de agregar un evento de enfoque a cada entrada en función de un nombre de clase ... No estoy seguro de si estás buscando eso, aunque podría ser de alguna ayuda.

JSFiddle Example of onfocus event

Answer 4

que necesita para dar un valor de enfoque automático.
<input id="i" type="text" onfocus="alert(1)" autofocus="">