10

現在、Twitter Bootstrap を使用していますが、モーダルのタブインデックスで奇妙な問題が発生しています。

モーダル内のフォーム要素をタブで移動しようとしていますが、最後のボタンの後、閉じるボタンに戻る前にフォーカスが消えました。どの要素がフォーカスされているかをログに記録する行をコンソールに追加しましたtabindex="-1"。

コードを共有することはできませんが、Bootstrap のドキュメントをざっと見てみると、サンプル モーダルでも発生することがわかりました。問題は再現可能です:

  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 のバグ/機能なのか、それともまったく別のものなのか?

4

3 に答える 3

10

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

jQuery を使用した回避策の 1 つを次に示します。これには、モーダルの最初と最後のタブ可能な要素にafirstとid を設定することが含まれます。last

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

例

http://www.bootply.com/96858

于 2013-11-26T17:09:00.960 に答える
0

実際には、メインのモーダル div に焦点を当てます。以下のコードで確認できます。

#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>
于 2013-11-28T07:10:06.027 に答える