BootStrap模態(tài)框和select2合用時input無法獲取焦點的解決方法
更新時間：2017年09月01日 14:00:56 作者：阿杰de博客
在bootstrap的模態(tài)框里使用select2插件,會導(dǎo)致select2里的input輸入框沒有辦法獲得焦點,沒有辦法輸入。怎么解決這個問題呢？下面小編給大家?guī)砹薆ootStrap模態(tài)框和select2合用時input無法獲取焦點的解決方法，一起看看吧
在bootstrap的模態(tài)框里使用select2插件,會導(dǎo)致select2里的input輸入框沒有辦法獲得焦點,沒有辦法輸入.
解決方法:
1.
把頁面中的 tabindex="-1" 刪掉（測試成功）:
<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> <h3 id="myModalLabel">Panel</h3> </div> <div class="modal-body" style="max-height: 800px"> <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> <h3 id="myModalLabel">Panel</h3> </div> <div class="modal-body" style="max-height: 800px">
可以在onshown方法里面做處理，主要原理就是因為bootstrap的tabindex='-1',占用了select2的tabindex='0'，腳本做處理 模態(tài)框顯示出來后，將模態(tài)框的tabindex屬性刪掉
BootstrapDialog.show({
onshown: function (dialogRef) {
$("#"+dialogRef.getId()).removeAttr("tabindex");
}
})
2.
重寫enforceFocus方法（測試發(fā)現(xiàn)沒有效果）:
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
總結(jié)
以上所述是小編給大家介紹的BootStrap模態(tài)框和select2合用時input無法獲取焦點的解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
下面小編就為大家分享一篇js 取消頁面可以選中文字的功能方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
剛才一個朋友告訴我他的blog友情鏈接太多了，所以把所有鏈接放到一個DIV中，加了個滾動條，可是他又不想每次別人來看，看到的都是前面幾個鏈接，于是問我有沒有什么辦法，想了一個，呵呵，正好有個辦法2008-11-11
一個父容器也是window的window下的comboBox在頁面中點擊無效，但是在控制臺中查看它的store卻是有值的，問題在于沒有顯示。下面小編給大家分享Extjs下拉框不顯示的問題，需要的的朋友參考下吧2017-06-06
用JavaScript繪圖 ——JS2D函數(shù)集...2007-01-01
用javascript實現(xiàn)的支持lrc歌詞的播放器
用javascript實現(xiàn)的支持lrc歌詞的播放器...2007-05-05
這篇文章主要介紹了詳解webpack 最簡打包結(jié)果分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
JS實現(xiàn)動態(tài)生成html table表格的方法分析
這篇文章主要介紹了JS實現(xiàn)動態(tài)生成html table表格的方法,結(jié)合實例形式分析了javascript針對數(shù)組數(shù)據(jù)的讀取、遍歷以及動態(tài)生成相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
和JAVA中String對象用處一樣啊，javascript中的String對象也有自己的方法，和JAVA中的類似。2015-06-06
“繼承”是面向?qū)ο缶幊汤锩娼?jīng)常提及到的概念，它的目的是實現(xiàn)代碼復(fù)用。這篇文章主要介紹了聊聊JavaScript如何實現(xiàn)繼承及特點，有興趣的可以了解一下。2017-04-04
這篇文章主要介紹了Javascript實踐中的命令模式，對命令模式感興趣的同學(xué)，可以參考下2021-05-05