IE11下CKEditor在Bootstrap Modal中下拉問(wèn)題的解決
最近在項(xiàng)目中需要在Bootstrap Modal彈出框中載入CKEditor。
初始化CKEditor以后，在IE11下，格式/字體/顏色的下拉會(huì)閃現(xiàn)一下后就消失，但在chrome和firefox下沒(méi)問(wèn)題。
主要原因是IE11下，點(diǎn)擊CKEditor，觸發(fā)了focusin.modal事件，原modal enforceFocus函數(shù)的if條件成立，bootstrap modal獲取焦點(diǎn)，CKEditor下拉失去焦點(diǎn)，所以下拉出現(xiàn)閃現(xiàn)。
Google了以后找到了一個(gè)解決方案
這個(gè)解決方案中，加了判斷后，可以避免modal獲取焦點(diǎn)，但好像modal一直都不會(huì)trigger了。
我做了一下修改，以下代碼是在原modal enforceFocus函數(shù)的基礎(chǔ)上添加了!$(e.target.parentNode).closest(".cke").length判斷條件，也就是說(shuō)在原判斷條件+未點(diǎn)擊在CKEditor上，則modal獲取焦點(diǎn)。
代碼的執(zhí)行順序是jQuery、bootstrap再執(zhí)行此段代碼。
$.fn.modal.Constructor.prototype.enforceFocus = function() {
$(document)
.off('focusin.bs.modal')
.on('focusin.bs.modal', $.proxy(function (e) {
if (document !== e.target &&
this.$element[0] !== e.target &&
!this.$element.has(e.target).length &&
!$(e.target.parentNode).closest(".cke").length) {
this.$element.trigger('focus')
}
}, this))
};
在項(xiàng)目中測(cè)試了一下未發(fā)現(xiàn)問(wèn)題。
附 bootstrap.js中enforceFocus函數(shù)代碼對(duì)比
Modal.prototype.enforceFocus = function () {
$(document)
.off('focusin.bs.modal') // guard against infinite focus loop
.on('focusin.bs.modal', $.proxy(function (e) {
if (document !== e.target &&
this.$element[0] !== e.target &&
!this.$element.has(e.target).length) {
this.$element.trigger('focus')
}
}, this))
}
this.$element表示modal對(duì)象。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- BootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴(kuò)展
- Bootstrap select多選下拉框?qū)崿F(xiàn)代碼
- bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整
- Bootstrap每天必學(xué)之下拉菜單
- Bootstrap模塊dropdown實(shí)現(xiàn)下拉框響應(yīng)
- Bootstrap框架下下拉框select搜索功能
- Bootstrap Table 在指定列中添加下拉框控件并獲取所選值
- Bootstrap每天必學(xué)之級(jí)聯(lián)下拉菜單
- bootstrap中selectpicker下拉框使用方法實(shí)例
- Bootstrap中的Dropdown下拉菜單更改為懸停(hover)觸發(fā)
相關(guān)文章
jquery實(shí)現(xiàn)的圖片點(diǎn)擊滾動(dòng)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)的圖片點(diǎn)擊滾動(dòng)效果,需要的朋友可以參考下2014-04-04
用JavaScript實(shí)現(xiàn) 鐵甲無(wú)敵獎(jiǎng)門人 “開口中”猜數(shù)游戲
JavaScript在常人看來(lái)都是門出不了廳堂的小語(yǔ)言，僅管它沒(méi)有明星語(yǔ)言的閃耀，但至少網(wǎng)頁(yè)的閃耀還是需要它的，同時(shí)它是一門很實(shí)用的語(yǔ)言。2009-10-10
JavaScript中innerHTML，innerText，outerHTML的用法及區(qū)別
在javascript中如果我們要獲取對(duì)象內(nèi)容，js為我們提供了三種方法outerhtml、innerhtml和innertext,但他們之間具體怎么使用與具體的區(qū)別在哪里，可能很多人不知道吧，接下來(lái)跟著小編一起來(lái)學(xué)習(xí)innerHTML，innerText，outerHTML的用法及區(qū)別吧。2015-09-09
這篇文章主要介紹了ES6 Promise對(duì)象的含義和基本用法,結(jié)合實(shí)例形式分析了Promise的含義、功能、基本用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06
這篇文章用實(shí)例代碼講述了JavaScript如何獲取頁(yè)面圖片原始尺寸的方法，現(xiàn)在分享給大家供大家參考學(xué)習(xí)，有需要的可以一起來(lái)看看。2016-09-09
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)滑動(dòng)按鈕效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要給大家介紹了關(guān)于JS重學(xué)系列之new操作符的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
js彈窗想必大家都有見到過(guò)吧，如何要說(shuō)可以自由拖拽，并兼容大部分瀏覽器的就沒(méi)有幾個(gè)了吧，本文的這個(gè)示例或許是大家要找的，可以參考下2013-10-10
純JS實(shí)現(xiàn)可用于頁(yè)碼更換的飛頁(yè)特效示例
這篇文章主要介紹了純JS實(shí)現(xiàn)可用于頁(yè)碼更換的飛頁(yè)特效,涉及javascript結(jié)合時(shí)間函數(shù)的數(shù)學(xué)運(yùn)算與頁(yè)面元素屬性動(dòng)態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
js實(shí)現(xiàn)點(diǎn)擊左右按鈕輪播圖片效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊左右按鈕輪播圖片效果的方法,涉及click事件相應(yīng)、animate方法等使用技巧,需要的朋友可以參考下2015-01-01