多数のボタンをホストする jQuery UI ダイアログがあります。
これらのボタンでキーボード コントロール (タブ ナビゲーション) を使用したいので、ダイアログのオープン イベント ハンドラーで、最初のボタンをフォーカス済みに設定しました。
これが機能していることを視覚的に確認でき、document.activeElement を使用して検証することもできますが、フォーカスが奪われ、別の何かがフォーカスされます。
この時点では、それ以上のフックがないため、何がフォーカスされているかをどのように確認すればよいかわかりません。
他の誰かが同様の問題に気づきましたか?
興味がある場合は、私のコードは次のとおりです (以下で説明するようにフォーカスを追加するように修正されています)。
in doc.ready - jQuery Buttons も追加したことに注意してください - しかし、それらはキーボードイベントにまったく応答していないようですが、それは別の質問です。
$("#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>
ご覧のとおり、途中でイベント ハンドラーを追加しようとしましたが、何も起こりません!