2009-05-22 10 views
6

注:可能な解決策はFirefox 3.0のみで動作する必要があり、私のアプリはIEからのアクセスを許可していません!onClickイベントのJavascriptフォーカスを変更しますか?

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

私の問題をライトボックスが表示されたときに、フォーカスがリンクの上に残っていることである:=)

私は、クリックされたとき、ユーザーにライトボックスを表示するリンクを持っています。したがって、ユーザーが上下のキーを押すと、表示されるライトボックスではなく、メイン文書のスクロールが終了します。

私はこれは私が放火魔コンソールでそれを入力すると正常に動作しますが、私は最後にそれが含まれている場合は動作しません。この

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

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

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

に動作します、私はなステートメントにconsole.logをデバッグ放火犯を削除する場合は、機能は動作を停止します!なぜこれが事実だろうと私は考えていない?なぜ、ファイヤーブートコンソールに変数を出力することが気象のフォーカスが要素に移動したかどうかに影響しますか? console.logステートメントはフォーカスに影響しますか?おそらくコンソールのデバッグウィンドウにフォーカスを移すことによって?

答えて

3

がついに

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。

4

私はあなたの問題が偽を返した後にフォーカスメソッドを呼び出すと思います。あなたのコードは、そのようにする必要があります:私の経験で

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

もし私が元の投稿を編集していなかったら、これを言ったでしょう。 – Triptych

+0

実際、それは私が試した最初の事の一つであり、うまくいきませんでした。元の質問を詳細で編集します。 – Janak

1

、問題は時々タイミング関連することができます焦点を当てる(例えば、フォーカス()要素がフォーカスされたことは完全に準備ができている前に実行されます)。私はライトボックスのマークアップは、show_lightbox関数が呼び出されたときに動的に作成されると仮定していますか?

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

さて、タイムアウトのアイデアはうまくいくようですが、私の問題は解決しません。それを動作させるためには、タイムアウトを1500秒に設定しなければなりませんでした。これは私のユーザーに一貫性のない行動を与えることになります。要素がフォーカスを受け取る準備ができているかどうかを確認するテストはありますか? – Janak

0

要素自体を集中してください:そのような場合、あなたはそれが問題のようなものがありますかどうかを確認するために専念しようとする前にわずかな遅延を追加してみてください。要素のloadイベントで、数msのタイムアウトを設定し、this.focus()を呼び出します。

その他try jQuery。ここで

関連する問題