快捷導(dǎo)航

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

更新時(shí)間：2017年09月01日 14:00:56 作者：阿杰de博客

在bootstrap的模態(tài)框里使用select2插件,會(huì)導(dǎo)致select2里的input輸入框沒(méi)有辦法獲得焦點(diǎn),沒(méi)有辦法輸入。怎么解決這個(gè)問(wèn)題呢？下面小編給大家?guī)?lái)了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>
  <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)框顯示出來(lái)后，將模態(tài)框的tabindex屬性刪掉

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

2.

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

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

總結(jié)

以上所述是小編給大家介紹的BootStrap模態(tài)框和select2合用時(shí)input無(wú)法獲取焦點(diǎn)的解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(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及火狐等瀏覽器,通過(guò)javascript自定義函數(shù)實(shí)現(xiàn)針對(duì)圖片的放大、縮小及拖拽等功能,涉及javascript動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下
2016-08-08
小程序?qū)崿F(xiàn)tab更換頁(yè)面效果
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)tab更換頁(yè)面效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
Script標(biāo)簽與訪問(wèn)HTML頁(yè)面詳解
本篇文章主要是對(duì)Script標(biāo)簽與訪問(wèn)HTML頁(yè)面進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
JavaScript瀏覽器的跨域問(wèn)題解決方案
出于瀏覽器的同源策略限制。同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會(huì)受到影響。知識(shí)點(diǎn)：跨域只會(huì)出現(xiàn)在瀏覽器上，小程序和APP開(kāi)發(fā)不會(huì)有跨域問(wèn)題
2022-11-11
一個(gè)特殊的排序需求的javascript實(shí)現(xiàn)代碼
看了之后1是手癢癢，2是覺(jué)得樓主的實(shí)現(xiàn)有問(wèn)題，就動(dòng)手寫(xiě)了一下，用js,大概用了30-40分鐘。
2009-09-09
layer.prompt輸入層的例子
今天小編就為大家分享一篇layer.prompt輸入層的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
JS實(shí)現(xiàn)普通輪播圖特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)普通輪播圖特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-01-01
javascript實(shí)現(xiàn)的登陸遮罩效果匯總
小編給大家推薦幾款使用Javascript實(shí)現(xiàn)的遮罩效果登陸框，其實(shí)這種效果是很常見(jiàn)的，在許多互動(dòng)的社區(qū)及其它的一些地方，彈出框應(yīng)用想當(dāng)流行，在不妨礙網(wǎng)頁(yè)運(yùn)行的情況下，用戶可以輸入登錄信息，實(shí)現(xiàn)完美登錄。
2015-11-11