模態對話框中禁用回車

?

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'});

這應該是定義生成或編輯模態對話框。(總是不記得那個參數 modalClass 的用處。其實這里的定義，要和 scriptUrl 定義的腳本文件里的函數保持一致。如上例中 _CreateOrEditModal.js 里的相關定義應是: app.modals.CreateOrEditEditionModal = function () { ... } ，這個函數定義了 init 和 save 方法，由 ModalManager 調用 ? )

通過在源碼中搜索 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 上已經加過這個屬性了。

?

轉載于:https://www.cnblogs.com/forestk/p/6908116.html

總結

以上是生活随笔為你收集整理的万水千山ABP - 弹出对话框禁用回车的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。