Cambiando Javascript Focus en evento de clic?

Question

Nota: Una posible solución necesita solamente funciona en Firefox 3.0, mi aplicación no permite el acceso de IE! =)

Tengo un enlace que, al hacer clic, se mostrará una caja de luz para el usuario:

<a href="#" onclick="show_lightbox();return false;">show lightbox</a>

Mi problema es que cuando se muestra la caja de luz, el foco permanece en el enlace. Por lo que si el usuario pulsa las teclas arriba o abajo, terminan desplazando el documento principal, no la luz que se muestra!

He tratado de establecer el foco al elemento de caja de luz utilizando un código como éste

function focus_on_lightbox() {
  document.getElementById('lightbox_content').focus(); 
} 

Esto funciona bien si lo escribo en la consola de Firebug, pero no funcionará si lo incluyo al final del fragmento onclick. Parece como si yo no puedo cambiar el foco desde el enlace de código que se ejecuta dentro del evento onclick?

---

- Actualización 1 He intentado algo como esto antes

<a href="#" onclick="show_lightbox();focus_on_lightbox();return false;">show lightbox</a>

y la función de añadir un poco de salida de depuración He modificado de la siguiente manera

function focus_on_lightbox() {
  console.log('hihi');
  console.log(document.activeElement);
  document.getElementById('lightbox_content').focus(); 
  console.log(document.activeElement);
}

La salida es la siguiente

hihi
<a onclick="closePopup();lightbox('apartment_detail','11619');focus_on_lightbox();return false;" href="#">
<a onclick="closePopup();lightbox('apartment_detail','11619');focus_on_lightbox();return false;" href="#">

Así que el enfoque antes de que hiciera nada era el enlace después de que trató de cambiar el enfoque que todavía permanecía en el enlace?

No es seguro si importa, pero yo uso Ajax para cargar la caja de luz, de la siguiente manera

  new Ajax.Updater(lightbox_content_id, url, {asynchronous:true, evalScripts:true, onLoading:show_lightbox_loading(), onComplete:focus_on_lightbox() }); 

He intentado establecer el foco después de que el Ajax completa, sino que también, sin suerte.

¿Qué me falta?

---

He estado tratando de hacer un trabajo de solución que se sugiere a continuación, tratando de ajustar el enfoque, viendo si tuve éxito marcando document.activeElement, si no, espere 100 milisegundos y vuelve a intentarlo. Si utilizo la siguiente función, que funcionará

function focus_on_lightbox() {
  var seconds_waited = 0
  pause(100);
  var current_focus = document.activeElement
  while (document.getElementById(lightbox_content_id) != current_focus && seconds_waited < 2000)
  {
    document.getElementById(lightbox_content_id).focus(); 
    console.log(document.activeElement);
    pause(100);
    current_focus = document.activeElement
    seconds_waited += 100;
  }
}

Sin embargo, si se quita la DECLARACIÓN console.log firebug la depuración, la función deja de funcionar !! No tengo idea de por qué esto sería el caso ?? ¿Por qué la salida de una variable a la consola de Firebug afectar enfoque tiempo se trasladó al elemento o no? ¿El documento console.log afecta a enfocar? quizá por lo que el foco a la ventana de la consola de depuración?

Answer 1

Esta es la función que finalmente funcionó

function focus_on_lightbox(seconds) {
  var seconds_waited
  seconds_waited = seconds
  document.getElementById(lightbox_content_id).focus(); 
  seconds_waited += 100;

  if (document.getElementById(lightbox_content_id) != document.activeElement && seconds_waited < 2000)
    setTimeout("focus_on_lightbox(" + seconds_waited + ");", 100);
  {
  }
}

Así que ¿por qué console.log parece afectar a ajustar el enfoque? Antes de que yo estaba usando esta función para hacer una pausa entre los intentos de cambiar el foco.

function pause(milliseconds) {
    var dt = new Date();
    while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
}

Esto provoca javascript para constantemente estar haciendo algo y creo que no estaba dando el tiempo para hacer el documento o la actualización o algo así. El console.log pareció romper este bloqueo y dar a la página de la oportunidad de cambiar su enfoque.

Cuando cambié enfoques para utilizar el tiempo de espera para hacer una pausa entre los intentos, console.log ya no era necesario!

Gracias bmoeskau para mí apuntando en la dirección correcta.

Answer 2

Creo que su problema está llamando a su método de enfoque después del regreso falsa. el código debe ser así:

<a href="#" 
    onclick="show_lightbox();focus_on_lightbox();return false;">
    show lightbox
</a>

Answer 3

En mi experiencia, se enfocan los problemas a veces pueden ser relacionados con el tiempo (por ejemplo, el enfoque () se ejecuta antes que el elemento está completamente listo para ser enfocado). Estoy asumiendo que el marcado caja de luz se crea dinámicamente cuando la función show_lightbox se llama? Si ese es el caso usted podría intentar añadir un ligero retardo antes de intentar centrar para ver si esa es la cuestión, algo como:

setTimeout("focus_on_lightbox();", 10);

Answer 4

Hacer que el elemento de centrarse en sí. En caso de carga del elemento, establecer un tiempo de espera de unos pocos ms y luego llamar this.focus ();

Else tratar jQuery.