解决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 相关文章推荐
在javascript中实现函数数组的方法
Dec 25 Javascript
angularjs中的单元测试实例
Dec 06 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
vue加载完成后的回调函数方法
Sep 07 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
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 分页类(模仿google)-面试题目解答
2009/09/13 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
python将文本转换成图片输出的方法
2015/04/28 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
详解Python做一个名片管理系统
2019/03/14 Python
python 实现识别图片上的数字
2019/07/30 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
python下载的库包存放路径
2020/07/27 Python
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
后勤副校长自我鉴定
2013/10/13 职场文书
上课看小说检讨书
2014/02/22 职场文书
怀念母亲教学反思
2014/04/28 职场文书
效能风暴心得体会
2014/09/04 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
毕业生自荐信范文
2015/03/05 职场文书
鲁冰花观后感
2015/06/10 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL