BootStrap模態(tài)框和select2合用時(shí)input無法獲取焦點(diǎn)的解決方法
更新時(shí)間：2017年09月01日 14:00:56 作者：阿杰de博客
在bootstrap的模態(tài)框里使用select2插件,會(huì)導(dǎo)致select2里的input輸入框沒有辦法獲得焦點(diǎn),沒有辦法輸入。怎么解決這個(gè)問題呢？下面小編給大家?guī)砹薆ootStrap模態(tài)框和select2合用時(shí)input無法獲取焦點(diǎn)的解決方法，一起看看吧
在bootstrap的模態(tài)框里使用select2插件,會(huì)導(dǎo)致select2里的input輸入框沒有辦法獲得焦點(diǎn),沒有辦法輸入.
解決方法:
1.
把頁面中的 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> <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方法里面做處理，主要原理就是因?yàn)閎ootstrap的tabindex='-1',占用了select2的tabindex='0'，腳本做處理 模態(tài)框顯示出來后，將模態(tài)框的tabindex屬性刪掉
BootstrapDialog.show({
onshown: function (dialogRef) {
$("#"+dialogRef.getId()).removeAttr("tabindex");
}
})
2.
重寫enforceFocus方法（測(cè)試發(fā)現(xiàn)沒有效果）:
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
總結(jié)
以上所述是小編給大家介紹的BootStrap模態(tài)框和select2合用時(shí)input無法獲取焦點(diǎn)的解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器小功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
Vant+postcss-pxtorem 實(shí)現(xiàn)瀏覽器適配功能
這篇文章主要介紹了Vant+postcss-pxtorem 實(shí)現(xiàn)瀏覽器適配,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
JS實(shí)現(xiàn)放大、縮小及拖拽圖片的方法【可兼容IE、火狐】
這篇文章主要介紹了JS實(shí)現(xiàn)放大、縮小及拖拽圖片的方法,可兼容IE及火狐等瀏覽器,通過javascript自定義函數(shù)實(shí)現(xiàn)針對(duì)圖片的放大、縮小及拖拽等功能,涉及javascript動(dòng)態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-08-08
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)tab更換頁面效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
本篇文章主要是對(duì)Script標(biāo)簽與訪問HTML頁面進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
出于瀏覽器的同源策略限制。同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會(huì)受到影響。知識(shí)點(diǎn)：跨域只會(huì)出現(xiàn)在瀏覽器上，小程序和APP開發(fā)不會(huì)有跨域問題2022-11-11
一個(gè)特殊的排序需求的javascript實(shí)現(xiàn)代碼
看了之后1是手癢癢，2是覺得樓主的實(shí)現(xiàn)有問題，就動(dòng)手寫了一下，用js,大概用了30-40分鐘。2009-09-09
今天小編就為大家分享一篇layer.prompt輸入層的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)普通輪播圖特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
javascript實(shí)現(xiàn)的登陸遮罩效果匯總
小編給大家推薦幾款使用Javascript實(shí)現(xiàn)的遮罩效果登陸框，其實(shí)這種效果是很常見的，在許多互動(dòng)的社區(qū)及其它的一些地方，彈出框應(yīng)用想當(dāng)流行，在不妨礙網(wǎng)頁運(yùn)行的情況下，用戶可以輸入登錄信息，實(shí)現(xiàn)完美登錄。2015-11-11