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 相关文章推荐
三种取消选中单选框radio的方法
Sep 09 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
vue 2.0项目中如何引入element-ui详解
Sep 06 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
12 种使用Vue 的最佳做法
Mar 30 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
php addslashes和mysql_real_escape_string
2010/01/24 PHP
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
JQuery UI皮肤定制
2009/07/27 Javascript
jquery 表单取值常用代码
2009/12/22 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
python线程、进程和协程详解
2016/07/19 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
为什么Python中没有"a++"这种写法
2018/11/27 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
连锁超市项目计划书
2014/09/15 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
催款通知书范文
2015/04/17 职场文书
公司员工手册范本
2015/05/14 职场文书
光荣之路观后感
2015/06/12 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python
python缺失值的解决方法总结
2021/06/09 Python