ホームページ > 記事 > ウェブフロントエンド > BootStrapモーダルボックスとselect2を併用した場合にinputがフォーカスを取得できない問題を完全に解決しました。
ブートストラップ モーダル ボックスで select2 プラグインを使用すると、select2 の入力ボックスがフォーカスと入力を取得できなくなります。この問題を解決するにはどうすればよいでしょうか?以下のエディターは、BootStrap モーダル ボックスと select2 を組み合わせたときに入力がフォーカスを取得できない問題の解決策を提供します。ブートストラップ モーダル ボックスで select2 プラグインを使用すると、select2 の入力ボックスがフォーカスされます。フォーカスを取得する方法はありませんが、入力する方法はありません。
ページ内の tabindex="-1"
を削除します。
<p id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <p class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Panel</h3> </p> <p class="modal-body" style="max-height: 800px"> <p id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <p class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Panel</h3> </p> <p class="modal-body" style="max-height: 800px">わかりました。表示されたメソッドの処理の主な原則は、ブートストラップの
tabindex='-1'
が select2 の tabindex='0'
を占有し、スクリプトがモーダル ボックスを処理します。表示されたら、モーダル ボックスの tabindex 属性を削除します tabindex="-1"
删掉(测试成功):
BootstrapDialog.show({ onshown: function (dialogRef) { $("#"+dialogRef.getId()).removeAttr("tabindex"); } })
可以在onshown方法里面做处理,主要原理就是因为bootstrap的tabindex='-1'
,占用了select2的tabindex='0'
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
rrreee
以上がBootStrapモーダルボックスとselect2を併用した場合にinputがフォーカスを取得できない問題を完全に解決しました。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。