Comprobación para ver si un elemento DOM tiene foco

Tengo un cuadro de texto lightbox que se muestra utilizando una llamada AJAX desde un UpdatePanel de ASP.NET. Cuando se muestra el lightbox, utilizo el método focus() de un cuadro de texto que está en el lightbox para enfocar el cuadro de texto de inmediato.Comprobación para ver si un elemento DOM tiene foco

Cuando está en Firefox, el cuadro de texto se enfoca sin problemas. En IE, el cuadro de texto no gana enfoque a menos que utilice

setTimeout(function(){txtBx.focus()}, 500);

para que el foco de incendio método un poco más tarde, después de que el elemento DOM se ha cargado Asumo.

El problema es que, inmediatamente por encima de esa línea, ya estoy verificando si el elemento es nulo/indefinido, por lo que el objeto ya debería existir si golpea esa línea, simplemente no se permitirá enfocar de inmediato por alguna razón.

Obviamente, configurar un temporizador para "corregir" este problema no es la mejor o más elegante manera de resolver esto. Me gustaría ser capaz de hacer algo como lo siguiente:

var txtBx = document.getElementById('txtBx'); 

if (txtPassword != null) { 
    txtPassword.focus(); 
    while (txtPassword.focus === false) { 
     txtPassword.focus(); 
    } 
}

¿Hay alguna manera de saber que un cuadro de texto tiene el foco para que yo pudiera hacer algo así por encima?

¿O estoy mirando esto de la manera incorrecta?

Editar
Para aclarar, no estoy llamando el código al cargar la página. El script es en la parte superior de la página, sin embargo, está dentro de una función que se llama cuando se completa la devolución de datos asincrónica de ASP.NET, no cuando se carga la página.

Como esto se muestra después de una actualización de Ajax, el DOM ya debería estar cargado, así que supongo que el evento $(document).ready() de jQuery no será útil aquí.

Fuente

2008-10-06 Dan Herbert

¿El método de trabajo si setTimeout() con un retraso de 0? – Aintaer

¿Podría ser que la secuencia de comandos se esté ejecutando antes de que se muestre lightbox + textbox? ¿Cómo estás abriendo la caja de luz? Tal vez publicar un código. –

Eso es ciertamente posible, no estoy seguro de qué hacer para evitarlo. –

Intente poner el javascript que establece el foco al final de la página en lugar del comienzo o hacer que se dispare después del evento cargado en la página. Eso ayudará a garantizar que el DOM esté completamente cargado antes de establecer el foco.

He usado FastInit para esto. JQuery $ (document) .ready() también funcionaría.

Fuente

2008-10-06 15:32:45 tvanfosson

podría intentar algo como esto [Específico de IE]. (No probado)

theAjaxCreatedElement.onreadystatechange = function() { 
    if (this.readyState != "complete") 
     return; 
    this.focus(); 
};

Otra forma podría ser la de cambiar el color de fondo del elemento con onfocus, luego recuperarlo con cheque js si es lo que debería ser, si no: reorientar el elemento.

Fuente

2008-10-06 16:01:43 olle

Lo intenté. ReadyState ya está "completo", que es lo que realmente me molesta. IE dice que el elemento DOM está listo, pero no puedes hacer cosas específicas hasta que esté "realmente listo", supongo que es la mejor manera de describirlo. –

Puede probar esto:

utilizar el evento endRequest del PageRequestManager. Ese evento se dispara una vez que ha finalizado una actualización de Ajax.
Enfoque el cuadro de texto en el controlador de eventos

Aquí hay un código de ejemplo:

<script type="text/javascript"> 
    function onRequestEnd() 
    { 
    var txtBx = $get('txtBx'); 
    txtBx.focus(); 
    } 
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onRequestEnd); 
</script>

Para enfocar el cuadro de texto inicialmente puede utilizar la función pageLoad (acceso directo a la load caso de que el cliente Application -side objeto):

<script type="text/javascript"> 
function pageLoad() 
{ 
    var txtBx = $get('txtBx'); 
    txtBx.focus(); 
} 
</script>

Fuente

2008-10-06 18:48:19

Eso es exactamente lo que estoy usando ahora mismo. Se está llamando al método focus() del elemento en el método onRequestEnd(). –

Hay varias cosas en IE, que hace el truco:

Si tiene elemento de enfoque diferente índice z - puede configurar rápidamente z-index a la del elemento enfocado actualmente (posiblemente establecer atributo de 'oculto'), ajustar el enfoque, y luego la volvió a Z- originales índice.
Intentar desenfocar() elemento actualmente enfocado.
Si el elemento es 'cuñas' - centrar el elemento 'cuña'.

Fuente

2008-10-06 20:27:05 Thevs

¿Qué quiere decir con "shimmed"? –

http://blogs.sun.com/venky/entry/ie_shim_technique – Thevs

Parece que el IE no actualiza el DOM hasta después de que el guión ha terminado de ejecutarse. Por lo tanto, una prueba de bucle para el enfoque no permitirá que el DOM se actualice. El uso de setTimeout es probablemente la única solución de trabajo.

Su ejemplo con .focus() es un ejemplo bien conocido, véase, por ejemplo this answer.

Fuente

2016-08-20 18:09:24

Ha intentado añadir el atributo autofocus="autofocus" al elemento de cuadro de texto que está llamando a través de Ajax?

Normalmente, cuando necesito cierta funcionalidad adicional JavaScript para funcionar con contenido dinámico, voy sólo tiene que añadir que JavaScript para el contenido que se llama así.

Ese JavaScript también se ejecutará después de que se haya agregado al DOM. No veo sentido escribir JavaScript en su archivo principal y luego "escuchar" los cambios en el DOM. Al igual que usted ha mencionado, setTimeout() es más de un truco que cualquier otra cosa para algo como esto :)

Fuente

2016-09-25 09:36:13

Comprobación para ver si un elemento DOM tiene foco

Respuesta

Cuestiones relacionadas