解决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 相关文章推荐
基于jQuery的模仿新浪微博时间的组件
Oct 04 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
javascript中caller和callee详解
Aug 10 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
express express-session的使用小结
Dec 12 Javascript
一文了解Vue中的nextTick
May 06 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 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中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
python中定义结构体的方法
2013/03/04 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
python调用百度语音识别api
2018/08/30 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
数据员岗位职责
2013/11/19 职场文书
大学生村官心得体会范文
2014/01/04 职场文书
工作表扬信的范文
2014/01/10 职场文书
中学生班主任评语
2014/01/30 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
工商管理自荐书
2014/07/06 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
nginx之queue的具体使用
2022/06/28 Servers