溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

IE11下CKEditor在Bootstrap Modal中下拉問(wèn)題的解決

發(fā)布時(shí)間：2020-10-02 16:56:52 來(lái)源：腳本之家 閱讀：146 作者：yulj 欄目：web開(kāi)發(fā)

最近在項(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í)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手