BootStrapモーダルボックスとselect2を併用した場合にinputがフォーカスを取得できない問題を完全に解決しました。

巴扎黑
リリース: 2017-09-02 13:32:43
オリジナル
3005 人が閲覧しました

ブートストラップ モーダル ボックスで 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=&#39;-1&#39;,占用了select2的tabindex=&#39;0&#39;

$.fn.modal.Constructor.prototype.enforceFocus = function() {};
ログイン後にコピー

enforceFocus メソッドを書き直します (テストでは効果がないことが判明しました):

rrreee

以上がBootStrapモーダルボックスとselect2を併用した場合にinputがフォーカスを取得できない問題を完全に解決しました。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!