Changer de mise au point JavaScript dans l'événement OnClick?

Question

Remarque: Une solution possible n'a besoin que de fonctionner dans Firefox 3.0, mon application n'autorise pas l'accès depuis IE! =)

J'ai un lien qui, lorsqu'il est cliqué, affiche une LightBox à l'utilisateur:

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

Mon problème est que lorsque la LightBox est affichée, l'accent reste sur le lien. Donc, si l'utilisateur appuie sur les touches haut ou vers le bas, ils finissent par faire défiler le document principal, pas la LightBox qui est affichée!

J'ai essayé de définir l'attention sur l'élément LightBox en utilisant du code comme celui-ci

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

Cela fonctionne bien si je le tape dans la console Firebug, mais ne fonctionnera pas si je l'inclue à la fin de l'extrait onclick. Il semble que je ne puisse pas modifier la mise au point du lien du code exécuté à l'intérieur de l'événement OnClick?

---

- MISE À JOUR 1 J'ai essayé quelque chose comme ça avant

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

Et j'ai modifié la fonction pour ajouter une sortie de débogage, comme suit

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

La sortie est la suivante

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

Donc, l'objectif avant de faire quoi que ce soit était sur le lien et après avoir essayé de changer l'attention, il restait encore sur le lien?

Je ne sais pas si c'est important, mais j'utilise Ajax pour charger la LightBox, comme suit

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

J'ai essayé de définir l'objectif après la fin de l'Ajax, mais aussi, pas de chance.

Qu'est-ce que je rate?

---

J'ai essayé de faire fonctionner une solution qui a été suggérée ci-dessous en essayant de définir l'attention, en voyant si j'ai réussi en vérifiant document.activeLelement, sinon, attendez 100 millisecondes et réessayez. Si j'utilise la fonction suivante, cela fonctionnera

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

Cependant, si je supprime le Firebug Debugging Statment Console.log, la fonction cesse de fonctionner !! Je ne sais pas pourquoi ce serait le cas ?? Pourquoi la sortie d'une variable à la console Firebug affecterait-elle la mise au point météorologique est-elle déplacée ou non? L'énoncé Console.log affecte-t-il le foyer? Peut-être en mettant l'accent sur la fenêtre de débogage de la console?

Answer 1

Voici la fonction qui a finalement fonctionné

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

Alors, pourquoi Console.log semble-t-il affecter la mise au point? Avant d'utiliser cette fonction pour faire une pause entre les tentatives de modification de la mise au point.

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

Cela fait que JavaScript fait constamment quelque chose et je pense que cela ne donnait pas au document le temps de rendre ou de mettre à jour ou quelque chose. La console.log semblait briser ce verrou et donner à la page une chance de changer son objectif.

Lorsque j'ai changé d'approches pour utiliser le délai d'expiration pour faire une pause entre les tentatives, Console.log n'était plus nécessaire!

Merci Bmoeskau de m'avoir pointé dans la bonne direction.

Answer 2

Je pense que votre problème est d'appeler votre méthode de mise au point après Retour False. Votre code devrait être comme ça:

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

Answer 3

D'après mon expérience, les problèmes de mise au point peuvent parfois être liés au timing (par exemple, focus () s'exécute avant que l'élément ne soit pleinement prêt à être concentré). Je suppose que le balisage LightBox est créé dynamiquement lorsque la fonction show_lightbox est appelée? Si tel est le cas, vous pouvez essayer d'ajouter un léger retard avant d'essayer de se concentrer pour voir si c'est le problème, quelque chose comme:

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

Answer 4

Faites la concentration de l'élément lui-même. Sur l'événement de chargement de l'élément, définissez un délai d'expiration de quelques ms, puis appelez ceci.focus ();

Sinon, essayez jQuery.