解决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 相关文章推荐
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
js实现微信分享代码
Oct 11 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
BootStrap导航栏问题记录
Jul 31 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
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中关于普通表单多文件上传的处理方法
2011/03/25 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
javascript实现微信分享
2014/12/23 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
Python判断变量是否已经定义的方法
2014/08/18 Python
Python中的自省(反射)详解
2015/06/02 Python
使用python实现生成用户信息
2017/03/20 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
教师个人事迹材料
2014/12/17 职场文书
节约用电通知
2015/04/25 职场文书
少年犯观后感
2015/06/11 职场文书
2015国庆节感想
2015/08/04 职场文书
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS