IE11下CKEditor在Bootstrap Modal中下拉問題的解決
最近在項(xiàng)目中需要在Bootstrap Modal彈出框中載入CKEditor。
初始化CKEditor以后，在IE11下，格式/字體/顏色的下拉會(huì)閃現(xiàn)一下后就消失，但在chrome和firefox下沒問題。
主要原因是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判斷條件，也就是說在原判斷條件+未點(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)目中測試了一下未發(fā)現(xià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ì)象。
以上就是本文的全部內(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)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序底部彈出框封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JS基礎(chǔ)之undefined與null的區(qū)別分析
在JavaScript開發(fā)中，被人問到：null與undefined到底有啥區(qū)別？一時(shí)間不好回答，特別是undefined，因?yàn)檫@涉及到undefined的實(shí)現(xiàn)原理。2011-08-08
這篇文章主要介紹了element-ui上傳一張圖片后隱藏上傳按鈕功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
Javascript 是你的高階函數(shù)(高級(jí)應(yīng)用)
這篇文章主要介紹了Javascript 是你的高階函數(shù) ,需要的朋友可以參考下2015-06-06
JavaScript獲取上傳進(jìn)度的幾種方式實(shí)現(xiàn)
進(jìn)度條的應(yīng)用是為了顯示的告訴用戶文件上傳了多少,本文主要介紹了JavaScript獲取上傳進(jìn)度的幾種方式,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
JavaScript箭頭函數(shù)_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript箭頭函數(shù)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
node.js 一個(gè)簡單的頁面輸出實(shí)現(xiàn)代碼
最近決定重拾node.js，用它來做一個(gè)合并JS文件的東西。由于忘得差不多了，先看能不能輸出一個(gè)頁面來再說。以下是我的一些筆記，省得以后又忘凈光2012-03-03
這篇文章主要介紹了JavaScript 防抖和節(jié)流,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
JavaScript prototype對(duì)象的屬性說明
JavaScript中對(duì)象的prototype屬性，是用來返回對(duì)象類型原型的引用的。我們使用prototype屬性提供對(duì)象的類的一組基本功能。并且對(duì)象的新實(shí)例會(huì)”繼承”賦予該對(duì)象原型的操作。但是這個(gè)prototype到底是怎么實(shí)現(xiàn)和被管理的呢？2010-03-03
JS為什么說async/await是generator的語法糖詳解
這篇文章主要給大家介紹了關(guān)于JS為什么說async/await是generator的語法糖的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07