解决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之get缓存问题的最简单方法介绍
Dec 19 Javascript
js清理Word格式示例代码
Feb 13 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
微信小程序登录时如何获取input框中的内容
Dec 04 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中使用全局变量的几种方法
2013/06/24 PHP
php对数组排序代码分享
2014/02/24 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
微信支付扫码支付php版
2016/07/22 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
Python线程中对join方法的运用的教程
2015/04/09 Python
Djang中静态文件配置方法
2015/07/30 Python
利用aardio给python编写图形界面
2017/08/21 Python
基于python 字符编码的理解
2017/09/02 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
使用python实现对元素的长截图功能
2019/11/14 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
python中pdb模块实例用法
2021/01/15 Python
PHP面试题-$message和$$message的区别
2015/12/08 面试题
毕业生医学检验求职信
2013/10/16 职场文书
村捐赠仪式答谢词
2014/01/21 职场文书
银行批评与自我批评
2014/02/10 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
离婚协议书标准格式
2014/10/04 职场文书
单位考核聘任报告
2015/03/02 职场文书
格林童话读书笔记
2015/06/30 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js