模態(tài)對(duì)話框中禁用回車

?

ABP Zero 中，使用彈出對(duì)話框進(jìn)行實(shí)體編輯，回車時(shí)會(huì)自動(dòng)保存并關(guān)閉對(duì)話框。那么如何禁用這個(gè)回車功能 ?

?

查看實(shí)體列表視圖 index.cshtml 所對(duì)應(yīng)加載的腳本文件 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'});

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

通過(guò)在源碼中搜索 ModalManager ，找到? Web\Common\Scripts\ModalManager.js 文件中關(guān)于 app.ModalManager 的定義

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

app.ModalManager 擴(kuò)展定義了Bootstrap 的模態(tài)框插件，其中有一段代碼：

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

很明顯，這段代碼捕獲模態(tài)體中的按鍵事件，當(dāng)按鍵是回車時(shí)，阻止默認(rèn)綁定動(dòng)作，并保存。

把這一段注釋掉，或者根據(jù)需要做修改吧。

?

有關(guān) bootstrap 模態(tài)框禁用回車的文章，提到需要在 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>

一點(diǎn)沒(méi)錯(cuò)，button 上已經(jīng)加過(guò)這個(gè)屬性了。

?

轉(zhuǎn)載于:https://www.cnblogs.com/forestk/p/6908116.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。