IE11下CKEditor在Bootstrap Modal中下拉问题的解决


Posted in Javascript onSeptember 25, 2019

最近在项目中需要在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对象。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
插件:检测javascript的内存泄漏
Mar 04 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
史上最为详细的javascript继承(推荐)
May 18 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 #Javascript
vue+axios实现post文件下载
Sep 25 #Javascript
vue + axios get下载文件功能
Sep 25 #Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 #Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 #jQuery
axios实现文件上传并获取进度
Mar 25 #Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 #Javascript
You might like
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
提问的智慧
2006/10/09 PHP
用PHP来写记数器(详细介绍)
2006/10/09 PHP
PHP中str_replace函数使用小结
2008/10/11 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
深入理解python函数递归和生成器
2016/06/06 Python
python编程羊车门问题代码示例
2017/10/25 Python
简单了解什么是神经网络
2017/12/23 Python
Flask配置Cors跨域的实现
2019/07/12 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
特色冷饮店创业计划书
2014/01/28 职场文书
大学毕业感言200字
2014/03/09 职场文书
与美同行演讲稿
2014/09/13 职场文书
2014年工程工作总结
2014/11/25 职场文书
学历证明样本
2015/06/16 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
Vue的过滤器你真了解吗
2022/02/24 Vue.js