Cambiare Javascript Focus in evento onclick?

Question

Nota: Una possibile soluzione ha bisogno di lavoro solo in Firefox 3.0, la mia app non consente l'accesso da IE! =)

Ho un link che, se cliccato, verrà visualizzato un lightbox per l'utente:

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

Il mio problema è che quando viene visualizzato il lightbox, il focus rimane sul link. Quindi, se l'utente preme i tasti su o giù, finiscono per scorrere il documento principale, non l'ID che viene visualizzato!

Ho cercato di impostare la messa a fuoco l'elemento lightbox utilizzando il codice come questo

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

Questo funziona bene se digito nella console Firebug, ma non funziona se comprendo che alla fine del frammento di onclick. Sembra come se non posso cambiare l'attenzione lontano dal collegamento dal codice eseguito all'interno l'evento onclick?

---

- Update 1 Ho provato qualcosa di simile prima

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

e ho funzione per aggiungere un po 'di output di debug modificati, come segue

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

L'uscita è il seguente

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="#">

Quindi, la messa a fuoco prima di me tutto era sul link e dopo ho provato a cambiare la messa a fuoco è ancora rimasta sul link?

Non sono sicuro se è importante, ma io uso ajax per caricare il lightbox, come segue

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

Ho cercato di impostare la messa a fuoco dopo l'ajax completo, ma anche, senza fortuna.

Che cosa mi manca?

---

Ho cercato di fare un lavoro di soluzione che è stata suggerita di seguito cercando di impostare la messa a fuoco, vedere se ci sono riuscito controllando document.activeElement, in caso contrario, attendere 100 millisecondi e riprovare. Se uso la seguente funzione, funzionerà

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;
  }
}

Tuttavia, se mi tolgo la statment console.log Firebug il debug, la funzione smette di funzionare !! Non ho idea del perché questo sarebbe il caso ?? Perché l'output una variabile per la console di Firebug influenzare tempo di messa a fuoco viene spostata l'elemento o no? L'espressione console.log influisce concentrarsi? forse portando il focus alla finestra della console di debug?

Answer 1

Questa è la funzione che finalmente ha funzionato

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);
  {
  }
}

Allora perché console.log sembrano influenzare la messa a fuoco? Prima usavo questa funzione per mettere in pausa tra i tentativi di cambiare la messa a fuoco.

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

Questo fa sì che javascript per essere costantemente facendo qualcosa e penso che non stava dando il tempo per eseguire il rendering del documento o l'aggiornamento o qualcosa del genere. Il console.log sembrava rompere questo blocco e dare alla pagina la possibilità di cambiare la sua attenzione.

Quando ho cambiato approcci per utilizzare il timeout per mettere in pausa tra i tentativi, console.log non era più necessaria!

Grazie bmoeskau per avermi nella giusta direzione.

Answer 2

Credo che il problema sta chiamando il metodo di messa a fuoco dopo return false. il codice dovrebbe essere così:

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

Answer 3

Nella mia esperienza, si concentrano i problemi a volte possono essere relativi alla temporizzazione (ad esempio, messa a fuoco () viene eseguito prima l'elemento è completamente pronto per essere messo a fuoco). Sto assumendo che il markup lightbox si crea dinamicamente quando viene chiamata la funzione show_lightbox? Se questo è il caso si potrebbe provare ad aggiungere un leggero ritardo prima di tentare di mettere a fuoco per vedere se questo è il problema, qualcosa di simile:

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

Answer 4

Fare l'elemento stesso fuoco. Sulla evento di caricamento dell'elemento, impostare un timeout di pochi ms e quindi chiamare this.focus ();

Else provare jQuery.