6

注：考えられる解決策はFirefox 3.0でのみ機能する必要があり、私のアプリはIEからのアクセスを許可していません！=）

クリックすると、ユーザーにライトボックスを表示するリンクがあります。

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

私の問題は、ライトボックスが表示されているときに、リンクにフォーカスが残っていることです。したがって、ユーザーが上キーまたは下キーを押すと、表示されているライトボックスではなく、メインドキュメントがスクロールされてしまいます。

このようなコードを使用して、ライトボックス要素にフォーカスを設定しようとしました

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

これは、firebugコンソールに入力すると正常に機能しますが、onclickスニペットの最後に含めると機能しません。onclickイベント内で実行されたコードからリンクからフォーカスを変更できないように見えますか？

-アップデート1私は以前にこのようなことを試しました

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

次のように、デバッグ出力を追加するように関数を変更しました

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

出力は次のとおりです

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

それで、私が何かをする前の焦点はリンクにありました、そして私が焦点を変えようとした後、それはまだリンクに残っていましたか？

重要かどうかはわかりませんが、次のようにajaxを使用してライトボックスをロードします

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

ajaxが完了した後、フォーカスを設定しようとしましたが、運がありませんでした。

私は何が欠けていますか？

フォーカスを設定し、document.activeElementをチェックして成功したかどうかを確認することで、以下に提案するソリューションを機能させようとしています。成功しなかった場合は、100ミリ秒待ってから再試行してください。次の機能を使えば動作します

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

ただし、firebug debug statment console.logを削除すると、関数が機能しなくなります。なぜそうなるのか分かりませんか？変数をfirebugコンソールに出力すると、天気のフォーカスが要素に移動するかどうかに影響するのはなぜですか？console.logステートメントはフォーカスに影響しますか？おそらく、コンソールのデバッグウィンドウにフォーカスを移すことによってですか？

4

4 に答える 4

4

これが最終的に機能した機能です

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

では、なぜconsole.logがフォーカスの設定に影響を与えているように見えたのでしょうか。この機能を使用して、フォーカスを変更する試行の合間に一時停止する前。

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

これにより、javascriptは常に何かを実行し、ドキュメントにレンダリングや更新などの時間を与えていなかったと思います。console.logはこのロックを解除し、ページにフォーカスを変更する機会を与えているようです。

タイムアウトを使用して試行と試行の間に一時停止する方法を変更すると、console.logは不要になりました。

私を正しい方向に向けてくれたbmoeskauに感謝します。

于 2009-05-22T07:53:52.543 に答える
4

あなたの問題は、falseを返した後にfocusメソッドを呼び出すことだと思います。コードは次のようになります。

<a href="#" 
    onclick="show_lightbox();focus_on_lightbox();return false;">
    show lightbox
</a>
于 2009-05-22T05:56:09.677 に答える
1

私の経験では、フォーカスの問題はタイミングに関連している場合があります（たとえば、要素が完全にフォーカスされる準備ができる前にfocus（）が実行されます）。show_lightbox関数が呼び出されたときにライトボックスマークアップが動的に作成されると思いますか？その場合は、焦点を合わせて問題が発生するかどうかを確認する前に、少し遅延を追加してみてください。たとえば、次のようになります。

setTimeout("focus_on_lightbox();", 10);
于 2009-05-22T06:26:40.463 に答える
0

要素自体に焦点を合わせます。要素のロードイベントで、数ミリ秒のタイムアウトを設定してから、this.focus（）;を呼び出します。

それ以外の場合は、jQueryを試してください。

于 2009-05-22T07:26:44.157 に答える