キーボードを使用してドロップダウンメニューに移動することは可能ですか? Tab、矢印キーを使用してドロップダウンのサブ要素に移動しますか?
これが私が今持っているコードです:
<input type="text" value="click tab to jump to the drop down."/>
<div class="bs-docs-example">
<div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li><a tabindex="-1" href="#">Menu Item A</a></li>
<li><a tabindex="-1" href="#">Menu Item B</a></li>
<li><a tabindex="-1" href="#">Menu Item C</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Menu Item A1</a></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Menu Item B1</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">You should navigate here with the keyboard.</a></li>
<li><a tabindex="-1" href="#">Thanks For your Help!</a></li>
</ul>
</li>
</ul>
</div>
</div>
ブートストラップは、標準でアップ/ダウンキーをサポートするようになりました。
だからあなたが望むなら Tab ドロップダウンをアクティブにするには、単に キーコードを取得 (9)し、次のようにします。
$('.input-group input').keydown(function(e){
if(e.which == 9){ // tab
e.preventDefault();
$(this).parent().find('.dropdown-toggle').click();
$(this).parent().find('.dropdown-menu a:first').focus();
}
});
また、ユーザーがドロップダウンメニュー項目に集中している場合の機能をさらに追加する場合は、次のようにします。
$('.dropdown-menu a').keydown(function(e){
switch(e.which){
case 36: // home
e.preventDefault();
$(this).closest('.dropdown-menu').find('a:first').focus();
break;
case 35: // end
e.preventDefault();
$(this).closest('.dropdown-menu').find('a:last').focus();
break;
}
});
デモについては this JSFiddle を参照してください。
いい例です。
しかし、なぜsetTimeout
を設定したのですか?特定の理由?
setTimeout(function(){
$(".search-option:first").focus();
},100);
同じ例を作成し、タイムアウトなしで入力選択ボックスをシミュレートしました。 これをチェックしてください 。