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 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 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
PHP4实际应用经验篇(6)
2006/10/09 PHP
一些关于PHP的知识
2006/11/17 PHP
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
一个基于PDO的数据库操作类
2011/03/24 PHP
浅析PHP绘图技术
2013/07/03 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
使用Python的内建模块collections的教程
2015/04/28 Python
pandas中去除指定字符的实例
2018/05/18 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
Python字典底层实现原理详解
2019/12/18 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
年度考核评语
2014/01/19 职场文书
大学生优秀团员事迹材料
2014/01/30 职场文书
超市店长竞聘书
2015/09/15 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python