快捷導航

IE11下CKEditor在Bootstrap Modal中下拉問題的解決

更新時間：2019年09月25日 10:53:36 作者：yulj

這篇文章主要介紹了IE11下CKEditor在Bootstrap Modal中下拉問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近在項目中需要在Bootstrap Modal彈出框中載入CKEditor。

初始化CKEditor以后，在IE11下，格式/字體/顏色的下拉會閃現(xiàn)一下后就消失，但在chrome和firefox下沒問題。

主要原因是IE11下，點擊CKEditor，觸發(fā)了focusin.modal事件，原modal enforceFocus函數(shù)的if條件成立，bootstrap modal獲取焦點，CKEditor下拉失去焦點，所以下拉出現(xiàn)閃現(xiàn)。

Google了以后找到了一個解決方案

這個解決方案中，加了判斷后，可以避免modal獲取焦點，但好像modal一直都不會trigger了。

我做了一下修改，以下代碼是在原modal enforceFocus函數(shù)的基礎(chǔ)上添加了!$(e.target.parentNode).closest(".cke").length判斷條件，也就是說在原判斷條件+未點擊在CKEditor上，則modal獲取焦點。

代碼的執(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))
};

在項目中測試了一下未發(fā)現(xiàn)問題。

附 bootstrap.js中enforceFocus函數(shù)代碼對比

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對象。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jquery實現(xiàn)的圖片點擊滾動效果
這篇文章主要介紹了jquery實現(xiàn)的圖片點擊滾動效果,需要的朋友可以參考下
2014-04-04
用JavaScript實現(xiàn) 鐵甲無敵獎門人 “開口中”猜數(shù)游戲
JavaScript在常人看來都是門出不了廳堂的小語言，僅管它沒有明星語言的閃耀，但至少網(wǎng)頁的閃耀還是需要它的，同時它是一門很實用的語言。
2009-10-10
JavaScript中innerHTML，innerText，outerHTML的用法及區(qū)別
在javascript中如果我們要獲取對象內(nèi)容，js為我們提供了三種方法outerhtml、innerhtml和innertext,但他們之間具體怎么使用與具體的區(qū)別在哪里，可能很多人不知道吧，接下來跟著小編一起來學習innerHTML，innerText，outerHTML的用法及區(qū)別吧。
2015-09-09
ES6 Promise對象的含義和基本用法分析
這篇文章主要介紹了ES6 Promise對象的含義和基本用法,結(jié)合實例形式分析了Promise的含義、功能、基本用法及相關(guān)操作注意事項,需要的朋友可以參考下
2019-06-06
Javascript獲取圖片原始寬度和高度的方法詳解
這篇文章用實例代碼講述了JavaScript如何獲取頁面圖片原始尺寸的方法，現(xiàn)在分享給大家供大家參考學習，有需要的可以一起來看看。
2016-09-09
原生JS實現(xiàn)滑動按鈕效果
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)滑動按鈕效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
JS重學系列之聊聊new操作符
這篇文章主要給大家介紹了關(guān)于JS重學系列之new操作符的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-03-03
簡單漂亮的js彈窗可自由拖拽且兼容大部分瀏覽器
js彈窗想必大家都有見到過吧，如何要說可以自由拖拽，并兼容大部分瀏覽器的就沒有幾個了吧，本文的這個示例或許是大家要找的，可以參考下
2013-10-10
純JS實現(xiàn)可用于頁碼更換的飛頁特效示例
這篇文章主要介紹了純JS實現(xiàn)可用于頁碼更換的飛頁特效,涉及javascript結(jié)合時間函數(shù)的數(shù)學運算與頁面元素屬性動態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下
2018-05-05
js實現(xiàn)點擊左右按鈕輪播圖片效果實例
這篇文章主要介紹了js實現(xiàn)點擊左右按鈕輪播圖片效果的方法,涉及click事件相應、animate方法等使用技巧,需要的朋友可以參考下
2015-01-01