解决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 相关文章推荐
简明json介绍
Sep 28 Javascript
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
vue实现输入一位数字转汉字功能
Dec 13 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
网络资源
2006/10/09 PHP
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
php实现URL加密解密的方法
2016/11/17 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
Prototype Number对象 学习
2009/07/19 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
python实现自动重启本程序的方法
2015/07/09 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
艺术设计专业个人求职信范文
2013/12/11 职场文书
5.1手机促销活动
2014/01/17 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
践行三严三实心得体会
2014/10/13 职场文书
股权转让协议范本
2014/12/07 职场文书
贷款收入证明格式
2015/06/24 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers