モーダル=「 - 1」私は、現時点ではTwitterのブートストラップで働いている

Question

タブにフォーカスを取得した、と私は、モーダルのtabindex属性に奇妙な問題が発生しています：

私がしようとしていますタブをモーダル内のフォーム要素にドラッグしますが、最後のボタンの後にフォーカスが消えてから閉じるボタンに戻ります。私はどの要素がフォーカスされているかをログに記録するコンソールに行を追加しましたが、それはtabindex="-1"であっても、それ自体がモーダルであることが判明しました。

私は自分のコードを共有することはできませんが、ブートストラップのドキュメントを見てみると、それらの例のモーダルでも起こります。問題が再現可能です：

1. ログインhttp://getbootstrap.com/2.3.2/javascript.html#modals
2. オープンフィールドによるデモモーダル（ボタン「デモモーダルを起動」）
3. タブ。閉じるボタンに戻る前に「変更を保存」した後でフォーカスを失います。

モーダル（または実際にはtabindex="-1"の任意の要素）がフォーカスを獲得すると、コンソールにこれを記録します。

$('[tabindex="-1"]').focus(function(){ 
    console.log('Focus is on an element with negative tabindex') 
}); 

（明らかにモーダルをクリックするとログに記録されますが、範囲外です）。

どうしてですか？どうすればこれを防ぐことができますか？これはブラウザのバグですか、Twitter Bootstrapのバグ/機能なのでしょうか？

Answer 1

興味深い発見。これは、ブートストラップによって導入された何らかの種類のバグまたは動作のようです。タブインデックス-1の動作が非常に奇妙です。

これは、モーダルの最初と最後のタブ可能な要素にfirstとlast idを設定するjQueryを使用した場合の回避方法の1つです。

$('#myModal').keydown(function(e){ 
    if($('#last').is(":focus") && (e.which || e.keyCode) == 9){ 
    e.preventDefault(); 
    $('#first').focus(); 
    } 
}); 

例

http://www.bootply.com/96858

Answer 2

実際にあなたがすることによって、コード

#yourModalId:focus 
{ 
    background-color:yellow; 
    border:1px solid red; 
} 

HTMLコード

<div id="yourModalId" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>