ホームページ  >  記事  >  ウェブフロントエンド  >  BootStrapモーダルボックスとselect2を併用した場合にinputがフォーカスを取得できない問題を完全に解決しました。

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

巴扎黑
巴扎黑オリジナル
2017-09-02 13:32:432993ブラウズ

ブートストラップ モーダル ボックスで 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() {};

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

rrreee

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。