2009-05-22 10 views
1

私は、多くのボタンをホストするjQuery UIダイアログを持っています。jQuery UIダイアログがフォーカスを奪う

これらのボタンでキーボードコントロール(タブナビゲーション)を使用したいので、ダイアログのオープンイベントハンドラで、最初のボタンをフォーカスに設定します。

私はこれが目に見え、document.activeElementを使って確認することもできますが、フォーカスが奪われてフォーカスが得られます。

これまでのところ、私はそれ以上のフックを持っていないので、どのようにフォーカスを持っているかを知っているとは思いません。

他にも同様の問題がありますか?あなたが興味を持っている場合は

、私のコードは、この(後述のようにフォーカスを追加する改正)doc.readyで

ある - ノート私はそれにjQueryのボタンをも追加しました - しかし、彼らはドン」すべてのキーボードイベントに対応しているようですが、それは別の質問です。

 $("#dialogSearchType").dialog 
     (
      { 
       bgiframe: true, 
       height: 180, 
       width: 350, 
       modal: true, 
       autoOpen: false, 
       show: 'drop', 
       hide: 'fold', 
       buttons: { "Street": function() { HandleSearchStreetClick(); $(this).dialog("close"); }, 
        "Property": function() { HandleSearchPropertyClick(); $(this).dialog("close"); } 
       }, 
       focus: function(event, ui) { $("#btnSearchTypeProperty").focus(); } 
      } 
     ); 


    <div id="dialogSearchType" class="searchDialog" style="width: 280px; display: none" title="Search For..." onkeyup="HandleSearchTypeDialogKeyUp(event)"> 
     <span>What would you like to search for?</span> 
     <br />     
        <input type="button" tabindex="1" id="btnSearchTypeStreet" class="button" value="Street" onclick="HandleDialogSearchStreetClick()" /> 
     <input type="button" tabindex="2" id="btnSearchTypeProperty" class="button" value="Property" />   

    </div> 

ご覧のとおり、途中でイベントハンドラを追加しようとしましたが、何も起こりません。

答えて

1

オープンイベントハンドラの代わりにfocus event handlerを使用して、役立つかどうかを確認してください。ダイアログがモーダルでない限り、ダイアログがフォーカスを取得するたびにフォーカスを取得することをお勧めします。それでも問題が解決しない場合は、質問にコードを追加することをお勧めします。

+0

を働いた興味深いソリューションを見つけることができるおかげで、悲しいことに、これは動作しませんでした - 私は私のQを編集し、コードスニペットを追加しました。私が持っている他のBIG Q(私は別の質問として開きます)は、組み込みのボタン(ボタンオプションを使用)はキーボード入力を全く受けないということです。 jQuery UIが表示されているときに、これらのいずれかにフォーカスが設定されていることがわかりますが、動作するキーボードイベントはダイアログを閉じるESCだけです! :( – Duncan

1

さて、問題は何か分かりました。

ダイアログは[モーダル]に設定されています。

jQueryは、ドキュメントレベルでキーボードイベントをインターセプトし、キャンセルします。

私はそう思う、このイ​​ベントハンドラを破壊し、自分自身を追加する回避策を試みています。

PS誰かが頭の上からこれを行う方法を知っている場合、私に教えてください!

関連する問題