javascript - que - Establecer el foco del teclado en un<div>

request focus js

Question

Tengo el siguiente fragmento de código:

<div id="listbox1div" style="z-index:95; background:white; overflow-y:auto; overflow-x:hidden; width:240; height:314px;">
<a id="focusLink2"></a>
<table id="ptObj_listbox1...

Tengo una página que está construyendo elementos de <div> dinámicamente (como arriba). Este <div> muestra datos en la parte superior de la pantalla principal. Cuando la página genera los divs me gustaría establecer el foco. No puedo poner una función onLoad en la etiqueta del cuerpo ya que no sé cuándo se generarán los divs.

Una etiqueta <div> no puede tener el foco puesto en ella directamente. Así que puse una etiqueta <a> vacía con una identificación a la que llamo en la siguiente función:

function setTableFocus(count){
        var flinkText = ''focusLink''+count;
       document.getElementById(flinkText).focus();
}

No recibo ningún error y sé que se llama a la función cuando se presenta la página (a través de alertas). Sin embargo, cuando uso las teclas de flecha o el botón Enter, la página entera se mueve (ni siquiera el div que presenta los datos).

Cuando hago clic en uno de los elementos de la tabla (usando el mouse). Después de eso, el evento de tecla comienza a funcionar. Lo que me gustaría que haga es presentar los datos al usuario y automáticamente ser conducidos por el teclado.

¿Alguien tiene alguna sugerencia de cómo puedo lograr esto?

Answer 1

¿Tienes el control de la función asp? Si es así, entonces ese sería el lugar más fácil para establecer el foco. De lo contrario, podría escuchar el evento DOMNodeInserted (nota: la compatibilidad del navegador puede variar) y establecer el foco en div (o sus elementos secundarios) en función de las condiciones apropiadas.

Answer 2

¿quieres decir que quieres enfocar los divs siempre que se generen? prueba reasearching para estos

http://api.jquery.com/focus/

y

http://api.jquery.com/live/

y para la pulsación de tecla ..

http://api.jquery.com/keypress/

los divs afaik y otros elementos pueden tener foco de algún tipo como en wikis, como ...

http://en.wikipedia.org/wiki/JavaScript#Cross-site_vulnerabilities

y se desplazará automáticamente allí. No estoy seguro de cómo.

En cuanto a los divs y tablas generados dinámicamente, puede usar la función live () de jquery

Answer 3

La función que genera dinámicamente los divs tendrá el contexto disponible para saber en qué div enfocarse, después de la última salida div un script con scrollTo () para enfocar el div que desee. Asigne a cada div una ID, por lo que podrá elegirla fuera del conjunto.

Response.Write "
<script language=''text/javascript''>
document.getElementById(''div#'').scrollIntoView();
</script>
"

Answer 4

Lo resuelvo haciendo lo siguiente:

<div tabindex="0" >
    <button onclick="element.parentNode.focus();"/>
</div>

Answer 5

No puedes enfocar un div. ¿Te refieres a enfocar una entrada?

De todos modos, puede incluir una pequeña secuencia de comandos para enfocar algo directamente en el HTML, simplemente coloque el script justo después del div, o incluso dentro del div.

Answer 6

Podría usar getElementsByClassName

<div tabindex="0" class="to-focus">TEXT</div>
<script> document.getElementsByClassName(''to-focus'')[0].focus()</script>

Answer 7

puede hacer un tabindex div si agrega un atributo tabindex .

ver: http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex

El valor de tabindex puede permitir algún comportamiento interesante.

• Si se le da un valor de "-1", el elemento no se puede tabular, pero el foco se puede dar al elemento mediante programación (utilizando element.focus ()).
• Si se le da un valor de 0, el elemento se puede enfocar a través del teclado y cae en el flujo de tabulación del documento.
• Los valores superiores a 0 crean un nivel de prioridad, siendo 1 el más importante.

ACTUALIZACIÓN: agregó una demostración simple en http://jsfiddle.net/roberkules/sXj9m/