首页 > 代码库 > 万水千山ABP - 弹出对话框禁用回车
万水千山ABP - 弹出对话框禁用回车
模态对话框中禁用回车
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 - 弹出对话框禁用回车
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。