ホームページ > 記事 > ウェブフロントエンド > ブートストラップを使用するとテキストのフォーカスを取得できません。 _html/css_WEB-ITnose
ブートストラップを使用するとテキストのフォーカスを取得できません。 _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:24:28953ブラウズ
http://pan.baidu.com/share/link?shareid=2370374828&uk=2687476845
ブートストラップを使用してモーダル ダイアログ ボックスを作成したとき、このダイアログ ボックスを呼び出した後、ダイアログ ボックスを 2 回呼び出しました。ボックス モーダル ダイアログが再び呼び出されます。しかし、いくつかの問題があります。つまり、2 番目のモーダル ダイアログ ボックスのテキスト ボックスにフォーカスを取得できません。
ドキュメントをネットワーク ディスクに保存しました。ダウンロードして解凍するだけで使用できます。つまり、2 番目のダイアログ ボックスのテキスト ボックスはフォーカスを取得できませんが、チェック ボックスとラジオ ボタンは両方とも便利です。属性 tabindex="-1" に問題があることはわかっています。しかし、これがなぜなのか説明できる人はいるでしょうか?この属性を追加した後、2 番目のダイアログ ボックスのテキスト ボックスはフォーカスを取得できないのに、他のチェック ボックスやラジオ ボタンはフォーカスを取得できるのはなぜですか?
誰かがダウンロードして実行できることを願っています。なぜですか?
ダウンロードが不便な場合は、ここに HTML コードを投稿しますが、ブートストラップは自分でダウンロードする必要があります。 HTMLコードは以下の通りです
<html><meta charset="UTF-8"><head> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body><div class="modal hide fade" tabindex="-1" id="first"> <div class="modal-body"> <input type="text"> <button type="button" data-toggle="modal" data-target="#second">跳出第二个对话框</button> </div></div><div id="second" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-body"> 文本框<input type="text"> 复选框 <input type="checkbox"> 单选框 <input type="radio"> </div></div><button type="button" data-toggle="modal" data-target="#first">跳出第一个对话框</button><script src="http://code.jquery.com/jquery.js"></script> <script src="bootstrap.min.js"></script> </body></html>
ありがとうございます
ディスカッションへの返信(解決策)
フォーカスが無限ループしているようです
これはブートストラップのバグとみなすべきですが、マルチダイアログを追加しましたフォーカス管理 ダウンロード
フォーカスのループは無限にあります。独自の tabindex="-1" に従い、これを削除するだけで OK です。フォーカス無限ループについては、関連記事をご覧ください。
投稿者はそれを解決しましたか? 教えてください、私もこの問題に遭遇しました、