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 相关文章推荐
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
Js实现自定义右键行为
Mar 26 Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
浅谈小程序 setData学问多
Feb 20 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 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
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
javascript 实现map集合
2015/04/03 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
python爬虫常用的模块分析
2014/08/29 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
利用Python循环(包括while&for)各种打印九九乘法表的实例
2017/11/06 Python
python实现飞机大战
2018/09/11 Python
python中列表的含义及用法
2020/05/26 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
电脑销售顾问自荐信
2014/01/29 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
公司周年庆典标语
2014/10/07 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL