平時我們項目中的列表頁面通常都有條件搜索,為了使用方便通常都會支持回車搜索.

此功能的實現普遍做法是:為form表單添加 @keydown.enter.native="自定義方法名稱"
然后在方法觸發時判斷keyCode是否等與13?如果是13則證明觸發了回車鍵

例如:

<Form :label-width="100" :model="searchForm" inline ref="searchForm" @keydown.enter.native="searchEnterFun" @submit.native.prevent><FormItem label="搜索關鍵詞：" prop="keyword"><Input clearable placeholder="支持模糊搜索" style="width: 200px" type="text" v-model="searchForm.keyword"/></FormItem><FormItem style="margin-left: -75px"><Button @click="handleSearch" icon="md-search" type="primary">搜索</Button><Button @click="handleResetSearch">重置</Button></FormItem> </Form> searchEnterFun(e) {//which 和 keyCode 屬性提供了解決瀏覽器的兼容性的方法。//keyCode屬性返回onkeypress事件觸發的鍵的值的字符代碼，或者 onkeydown 或 onkeyup 事件的鍵的代碼var keyCode = window.event? e.keyCode:e.which;if (keyCode == 13) {this.getCustomList(); //搜索事件} },

嗯,回車觸發表單提交的實際應用就簡單介紹這么多,接下來我們來說說這里面的坑

1.使用vue開發，頁面文本框在點擊回車時會刷新頁面，而且只有第一次會觸發刷新。
2.回車后頁面進行了刷新并且在跳轉 URL中也多出了 ?
3.再次回車查詢正常，不會刷新了
那么我們來說說產生此bug的原因以及解決方案

bug原因:在當前頁面元素中只有一個文本框時，點擊回車時會自動提交表單；

資料依據:

W3C 標準中有如下規定：

When there is only one single-line text input field in a form,

the user agent should accept Enter in that field as a request to submit the form.

當表單中只有一個單行文本輸入框時，客戶端應該接受該區域中的Enter作為提交表單的請求

解決方案:

在FORM標簽中加入@SUBMIT.NATIVE.PREVENT阻止事件即可

大家仔細看我最上面的示例代碼不難發現本人已經添加,實在是這個坑跌的我差點爬不出來!!!

因此特做此紀錄,防止自己重復跌坑,也方便給已經跌坑的道友扔出"希望之梯"......

總結

以上是生活随笔為你收集整理的vue中form表单支持回车键提交踩坑的全部內容，希望文章能夠幫你解決所遇到的問題。

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