BootStrap模態(tài)框和select2合用時(shí)input無(wú)法獲取焦點(diǎn)怎么辦

這篇文章主要為大家展示了“BootStrap模態(tài)框和select2合用時(shí)input無(wú)法獲取焦點(diǎn)怎么辦”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“BootStrap模態(tài)框和select2合用時(shí)input無(wú)法獲取焦點(diǎn)怎么辦”這篇文章吧。

在bootstrap的模態(tài)框里使用select2插件,會(huì)導(dǎo)致select2里的input輸入框沒(méi)有辦法獲得焦點(diǎn),沒(méi)有辦法輸入.

解決方法:

1.

把頁(yè)面中的  tabindex="-1"  刪掉（測(cè)試成功）:

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h4 id="myModalLabel">Panel</h4>
 </div>
<div class="modal-body" >
<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h4 id="myModalLabel">Panel</h4>
 </div>
<div class="modal-body" >

可以在onshown方法里面做處理，主要原理就是因?yàn)閎ootstrap的tabindex='-1',占用了select2的tabindex='0'，腳本做處理 模態(tài)框顯示出來(lái)后，將模態(tài)框的tabindex屬性刪掉

BootstrapDialog.show({
   onshown: function (dialogRef) {
    $("#"+dialogRef.getId()).removeAttr("tabindex");
  }
})

2.

重寫enforceFocus方法（測(cè)試發(fā)現(xiàn)沒(méi)有效果）:

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

以上是“BootStrap模態(tài)框和select2合用時(shí)input無(wú)法獲取焦點(diǎn)怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！