码迷,mamicode.com
首页 > 其他好文 > 详细

万水千山ABP - 弹出对话框禁用回车

时间:2017-05-26 14:32:20      阅读:855      评论:0      收藏:0      [点我收藏+]

标签:event   文章   pre   eve   comm   脚本   pat   edit   加载   

模态对话框中禁用回车

 

ABP Zero 中,使用弹出对话框进行实体编辑,回车时会自动保存并关闭对话框。那么如何禁用这个回车功能 ?

 

查看实体列表视图 index.cshtml 所对应加载的脚本文件 index.js(如 Web\Areas\Mpa\Views\Editions\Index.js),有如下的定义

        var _createOrEditModal = new app.ModalManager({
            viewUrl: abp.appPath + ‘Mpa/Editions/CreateOrEditModal‘,
            scriptUrl: abp.appPath + ‘Areas/Mpa/Views/Editions/_CreateOrEditModal.js‘,
            modalClass: ‘CreateOrEditEditionModal‘
        });

这应该是定义生成或编辑模态对话框。

通过在源码中搜索 ModalManager ,找到  Web\Common\Scripts\ModalManager.js 文件中关于 app.ModalManager 的定义

app.ModalManager = (function () {
......
})();

app.ModalManager 扩展定义了Bootstrap 的模态框插件,其中有一段代码:

                _$modal.find(‘.modal-body‘).keydown(function (e) {
                    if (e.which == 13) {
                        e.preventDefault();
                        _saveModal();
                    }
                });

很明显,这段代码捕获模态体中的按键事件,当按键是回车时,阻止默认绑定动作,并保存。

把这一段注释掉,或者根据需要做修改吧。

 

有关 bootstrap 模态框禁用回车的文章,提到需要在 modal-footer 的所有 button 上都加上 type="button" 属性。我们看一下 ABP Zero 是如何定义的

Web\Areas\Mpa\Views\Common\Modals\_ModalFooterWithSaveAndCancel.cshtml

<div class="modal-footer">
    <button type="button" class="btn default close-button" data-dismiss="modal">@L("Cancel")</button>
    <button type="button" class="btn blue save-button"><i class="fa fa-save"></i> <span>@L("Save")</span></button>
</div>

一点没错,button 上已经加过这个属性了。

 

万水千山ABP - 弹出对话框禁用回车

标签:event   文章   pre   eve   comm   脚本   pat   edit   加载   

原文地址:http://www.cnblogs.com/forestk/p/6908116.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!