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错误的解决方案
Aug 07 Javascript
别了 JavaScript中的isXX系列
Aug 01 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 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
让你的网站首页自动选择语言转跳
2006/12/06 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
Javascript模块模式分析
2008/05/16 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
python 接口返回的json字符串实例
2018/03/27 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
python解释器spython使用及原理解析
2019/08/24 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
Python requests接口测试实现代码
2020/09/08 Python
网络方面基础面试题
2012/11/16 面试题
《九色鹿》教学反思
2014/02/27 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
维稳承诺书
2015/01/20 职场文书
检讨书范文2000字
2015/01/28 职场文书
主持人开场白台词
2015/05/29 职场文书
获奖感言一句话
2015/07/31 职场文书
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏