解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

 更新时间:2017年06月05日 14:09:30   作者:薄荷绿qa  
这篇文章主要介绍了解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题,需要的朋友可以参考下

废话不多说了直接给大家贴代码了,具体代码如下所示:

$('#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时弹出层文本框不能输入的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 如何在TypeScript中处理日期字符串

    如何在TypeScript中处理日期字符串

    这篇文章主要介绍了如何在TypeScript中处理日期字符串,主要通过输入日期字符串来改善开发者的体验并减少潜在的错误,下文实现操作的分享需要的小伙伴可以参考一下
    2022-04-04
  • 各浏览器对click方法的支持差异小结

    各浏览器对click方法的支持差异小结

    click方法可以用来模拟用户点击。有的浏览器中所有元素都具有click方法,有的浏览器则没有。
    2011-07-07
  • webpack构建的详细流程探底

    webpack构建的详细流程探底

    目前,几乎所有业务的开发构建都会用到 webpack 。所以下面这篇文章主要给大家介绍了关于webpack构建的详细流程的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2018-01-01
  • 解决layui 三级联动下拉框更新时回显的问题

    解决layui 三级联动下拉框更新时回显的问题

    今天小编就为大家分享一篇解决layui 三级联动下拉框更新时回显的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS继承实现方法及优缺点详解

    JS继承实现方法及优缺点详解

    这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • uniapp小程序的图片(视频)上传的组件封装方法

    uniapp小程序的图片(视频)上传的组件封装方法

    这篇文章主要介绍了uniapp做小程序的图片(视频)上传的组件封装,要求实现多张图片的上传 ,可以限制图片上传的数量,图片预览,多次使用对图片的上传顺序排序,需要的朋友可以参考下
    2024-02-02
  • JavaScript实现点击自动选择TextArea文本的方法

    JavaScript实现点击自动选择TextArea文本的方法

    这篇文章主要介绍了JavaScript实现点击自动选择TextArea文本的方法,涉及javascript中focus()、select()方法的使用技巧,非常简单实用,需要的朋友可以参考下
    2015-07-07
  • 关于删除时的提示处理(确定删除吗)

    关于删除时的提示处理(确定删除吗)

    在删除时为了提醒用户删除数据的不可恢复一般都会有提示处理的,通常会使用js做到这一点,下面有个不错的示例,感兴趣的朋友可以参考下
    2013-11-11
  • JavaScript实现的Tween算法及缓冲特效实例代码

    JavaScript实现的Tween算法及缓冲特效实例代码

    这篇文章主要介绍了JavaScript实现的Tween算法及缓冲特效,涉及JavaScript通过数学运算及样式属性操作实现缓动、弹性运动等效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • javaScript中Math()函数注意事项

    javaScript中Math()函数注意事项

    本文主要给大家分享了javascript中Math()函数的注意事项,以及math对象的方法,十分的简单实用,有需要的小伙伴可以参考下
    2015-06-06

最新评论