当前位置:主页 > javascript教程 > 解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

bootstrap中使用modal加载kindeditor时弹出层文本框不能输入怎么办

发布:2020-03-13 12:28:56 72


为找教程的网友们整理了javascript相关的编程文章,网友漕筠竹根据主题投稿了本篇教程内容,涉及到bootstrap、modal、kindeditor、解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题相关内容,已被317网友关注,涉猎到的知识点内容可以在下方电子书获得。

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


参考资料

相关文章

  • 详解Bootstrap按钮组

    发布:2020-01-27

    这篇文章主要为大家详细介绍了Bootstrap按钮组的简单实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • BootStrap动态、静态模态框实例

    发布:2021-05-11

    要用bootStrap这个框架就必须要重载它的class类,也就是说class要一样。接下来通过实例代码给大家介绍BootStrap的动态模态框及静态模态框,需要的朋友可以参考下


  • 推荐Bootstrap免费字体和图标网站

    发布:2019-12-30

    在这篇内容中,我们把这套框架上的免费字体图标做了个整合(当然,以后还会不断的更新)。大家对bootstrap免费字体图标有需要的话,可以参考本教程


  • Springboot项目与vue项目整合打包的实例操作方法

    发布:2020-07-07

    这篇文章主要介绍了Springboot项目与vue项目整合打包的实现方式,本文通过两种方式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下


  • Bootstrap可折叠侧边导航菜单实现代码

    发布:2020-04-24

    这篇文章主要介绍了Bootstrap实现可折叠分组侧边导航菜单的相关资料,需要的朋友可以参考下


  • bootstrap table用法详解

    发布:2020-07-08

    这篇文章主要为大家详细介绍了JS表格组件神器bootstrap table使用指南,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • 分享Bootstrap fileinput文件上传预览插件使用方法

    发布:2020-02-14

    这篇文章主要为大家详细介绍了Bootstrap fileinput文件上传预览插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • Bootstrap Table列宽拖动实例代码

    发布:2020-06-15

    Bootstrap Table可拖动,需要用到它的Resizable扩展插件,下面脚本之家小编给大家带来了Bootstrap Table列宽拖动的方法,感兴趣的朋友一起看看吧


网友讨论