解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题


Posted in Javascript onJune 05, 2017

废话不多说了直接给大家贴代码了,具体代码如下所示:

$('#myModal').on('shown', function() {
 $(document).off('focusin.modal');
});
//显示modal
$('#myModal').modal('show');
//show完毕前执行
$('#myModal').on('shown', function () {
  //加上下面这句!解决了~
  $(document).off('focusin.modal');
 // 打开Dialog后创建编辑器
 KindEditor.create('textarea[name="content"]', {
  resizeType : 1
 });
})
//hide完毕前执行
$('#myModal').on('hidden', function () {
 // 关闭Dialog前移除编辑器
 KindEditor.remove('textarea[name="content"]');
})

下面是我在项目中的应用,请大家注意加注释的那一句!

function computeMaskHeight() {
   var obj = $("#blockLoading");
   var parent = obj.parent();
   obj.height(parent.height());
  }
  function block(opt) {
   var defaults = {
    title: "",
    showClose: true,
    showOk: true,
    showBottom: true,
    showTitle: true,
    showHead: true,
    onOk: function() {
    },
    onShown: function(e) {
    }
   };
   var setting = $.extend(defaults, opt);
   $("#blockTitle").html(setting.title);
   if (setting.showClose) {
    $("#closeBlock, #closeBlockX").show();
   } else {
    $("#closeBlock, #closeBlockX").hide();
   }
   if (setting.showOk) {
    $("#blockOk").show();
   } else {
    $("#blockOk").hide();
   }
   $("#blockOk").unbind().click(function() {
    setting.onOk();
   });
   if (setting.showBottom) {
    $("#blockBottom").show();
   } else {
    $("#blockBottom").hide();
   }
   if (setting.showHead) {
    $("#blockHead").show();
   } else {
    $("#blockHead").hide();
   }
   $("#blockBody").html("<i class='icon-spinner icon-spin icon-4x'></i>");
   $('#blockContainer').off('shown.bs.modal').on('shown.bs.modal', function (e) {
    $(document).off('focusin.modal');//解决编辑器弹出层文本框不能输入的问题http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field
    setting.onShown(e);
   });
   $("#blockContainer").modal();
  }

以上所述是小编给大家介绍的解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
js实现导航栏中英文切换效果
Jan 16 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
Vue2.0实现购物车功能
Jun 05 #Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 #Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 #Javascript
详解Angular 4 表单快速入门
Jun 05 #Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 #Javascript
Node.js开发第三方微信公众平台
Jun 05 #Javascript
js自定义Tab选项卡效果
Jun 05 #Javascript
You might like
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
模仿OSO的论坛(四)
2006/10/09 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
php实现复制移动文件的方法
2015/07/29 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
python简单实现基数排序算法
2015/05/16 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
公关关系专员的自我评价分享
2013/11/20 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
学校运动会霸气口号
2014/06/07 职场文书
本科毕业生求职信
2014/06/15 职场文书
师范类求职信
2014/06/21 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
保证书格式
2015/01/16 职场文书
优秀员工自荐书
2015/03/06 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
SQL中的连接查询详解
2022/06/21 SQL Server