溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近在項目中需要在Bootstrap Modal彈出框中載入CKEditor。
初始化CKEditor以后，在IE11下，格式/字體/顏色的下拉會閃現一下后就消失，但在chrome和firefox下沒問題。
主要原因是IE11下，點擊CKEditor，觸發了focusin.modal事件，原modal enforceFocus函數的if條件成立，bootstrap modal獲取焦點，CKEditor下拉失去焦點，所以下拉出現閃現。
Google了以后找到了一個解決方案
這個解決方案中，加了判斷后，可以避免modal獲取焦點，但好像modal一直都不會trigger了。
我做了一下修改，以下代碼是在原modal enforceFocus函數的基礎上添加了!$(e.target.parentNode).closest(".cke").length判斷條件，也就是說在原判斷條件+未點擊在CKEditor上，則modal獲取焦點。
代碼的執行順序是jQuery、bootstrap再執行此段代碼。
$.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))
};
在項目中測試了一下未發現問題。
附 bootstrap.js中enforceFocus函數代碼對比
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對象。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
