tablas - obtener datos de una tabla html javascript

Verificando si un elemento DOM tiene foco

Question

Tengo un cuadro de texto lightbox que se muestra usando 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.

Cuando está en Firefox, el cuadro de texto gana foco sin ningún problema. En IE, el cuadro de texto no gana foco a menos que yo use

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

para hacer que el método de enfoque se dispare un poco más tarde, después de que se haya cargado el elemento DOM, lo 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 dejará enfocar inmediatamente para algunos razón.

Obviamente, establecer un temporizador para "arreglar" este problema no es la mejor ni la más elegante manera de resolverlo. Me gustaría poder 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 decir que un cuadro de texto tiene foco así que podría hacer algo como lo de arriba?

¿O estoy mirando esto de la manera incorrecta?

Editar
Para aclarar, no estoy llamando al código en la carga de la página. El script está 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, por lo que supongo que el evento $(document).ready() jQuery no será útil aquí.

Answer 1

Hay varias cosas en IE, que hace el truco:

1. Si el elemento de enfoque tiene un índice Z diferente, puede establecer rápidamente el índice z como el elemento actualmente enfocado (posiblemente estableciendo el atributo ''oculto''), establecer el foco y luego volver a establecerlo en el índice z original.

2. Intenta desenfocar () el elemento actualmente enfocado.

3. Si el elemento está ''recortado'': enfoca el elemento ''shim''.

Answer 2

Intente colocar el javascript que establece el foco al final de la página en lugar del comienzo o que se active 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.

Answer 3

Puedes intentar esto:

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

Aquí hay un código de muestra:

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

Para enfocar inicialmente el cuadro de texto, puede usar la función pageLoad (atajo al evento load del objeto Application -side):

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

Answer 4

podrías probar algo como esto [Específico de IE]. (no probado)

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

Otra forma podría ser cambiar el color de fondo del elemento con onfocus, luego recuperarlo con js verificar si es lo que debería ser, de lo contrario: reenfocar el elemento.

Answer 5

¿Has intentado agregar el atributo autofocus="autofocus" al elemento de la caja de texto que estás llamando a través de Ajax?

Normalmente, cuando necesito cierta funcionalidad de JavaScript adicional para ejecutar en contenido dinámico, simplemente agregaré ese JavaScript al contenido que se llama también.

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. Como mencionaste, setTimeout () es más un truco que otra cosa para algo como esto :)

Answer 6

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

Su ejemplo con .focus() es un ejemplo bien conocido, vea, por ejemplo, esta respuesta .