elementUI中input回車觸發(fā)頁面刷新問題與解決方法
前言
今天在做項目的的時候發(fā)現創(chuàng)建的el-form表單內單個el-input框輸入值后點回車會導致頁面刷新的問題，于是好奇心驅使下去查了vue中的form表單內的單input框也會跳轉頁面也就是頁面刷新的問題。查了下
原因：elementUI中的當el-form表單只存在一個el-input框時，會觸發(fā)表單的默認提交事件，element也給出了解釋
:::tip W3C 標準中有如下規(guī)定：
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.
即：當一個 form 元素中只有一個輸入框時，在該輸入框中按下回車應提交該表單。
例：el-form內單el-input觸發(fā)頁面刷新
<el-form :model="form" ref="form" label-width="200px" class="form">
<el-form-item
label="姓名"
prop="name"
>
<el-input v-model.number="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit('form')">提交</el-button>
<el-button @click="reset('form')">重置</el-button>
</el-form-item>
</el-form>
解決方法：element也給出了解決方法
如果希望阻止這一默認行為，可以在
<el-form>標簽上添加@submit.native.prevent。 :::
<el-form
:model="form"
ref="form"
label-width="200px"
class="form"
@submit.native.prevent
>
<el-form-item
label="姓名"
prop="name"
>
<el-input v-model.number="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submit('form')">提交</el-button>
<el-button @click="reset('form')">重置</el-button>
</el-form-item>
</el-form>官方給出的只是阻止了這一默認行為。當需要回車來提交表單時可以通過下面這種操作來進行解決
<el-form
:model="form"
ref="form"
label-width="200px"
class="form"
@submit.native.prevent="() => submit('form')"
>
<el-form-item
label="姓名"
prop="name"
>
<el-input v-model.number="form.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">提交</el-button>
<el-button @click="reset('form')">重置</el-button>
</el-form-item>
</el-form>
//注意事項
el-form 方式 確保使用 @submit.native.prevent 阻止原生事件，執(zhí)行方法為搜索按鈕按click事件
[確保方法調用不丟參數]
搜索按鈕 - 確保被包裹在 el-form 中
搜索按鈕 - 確保按鈕的click事件去除掉
搜索按鈕 - 確保增加 native-type="submit" 屬性注意事項：
那elementUI的解決了， 原生的form表單的單input和form包裹el-input回車刷新的問題也一樣可以解決
1.在form表單內再增加一個隱藏的input框
①通過hidden定義隱藏的輸入字段
<form> <input type="hidden" value="1"></input> </form>
②通過css樣式進行隱藏
<form> <input type="text" style="display:none"></input> </form>
2.去掉輸入框的回車事件（根據需求來定，有的需要回車事件提交表單來查詢或者執(zhí)行其他操作則該方法不適用）
<form>
<input type="text" onkeydown="ClearSubmit(e)"></input>
</form>
<script>
function ClearSubmit(e) {
if (e.keyCode == ) {
return false;
}
}
</script>3.阻止表單默認提交事件（下面例子是以form表單包裹el-input，解決 el-form中el-input回車頁面刷新的問題 原生form內的input可用onsubmit句柄返回false來解決）
<form @submit.prevent="() => getList()">
<el-input V-model="inputValue">
</el-input>
<el-button type="primary" native-type="submit"> {{"提交"}} </el-button>
<el-button @click="reset">{{ $t(重置') }}</el-button>
</form>結語：給一個elementui的官方解決這個回車刷新頁面的方案開源地址吧
總結
到此這篇關于elementUI中input回車觸發(fā)頁面刷新問題與解決方法的文章就介紹到這了,更多相關elementUI input觸發(fā)頁面刷新內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue element 表頭添加斜線的實現代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-11-11
vue+canvas實現數據實時從上到下刷新瀑布圖效果(類似QT的)
這篇文章主要介紹了vue+canvas實現數據實時從上到下刷新瀑布圖效果(類似QT的),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
這篇文章主要介紹了Vue中如何對ElementUI的Dialog組件封裝問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Vue官方文檔梳理之全局配置，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要為大家詳細介紹了vue實現二級導航欄效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要為大家詳細介紹了使用Vue3實現pdf在線預覽的三種常用方式,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2025-02-02
這篇文章主要介紹了Vue3?入口文件createApp函數,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
今天我們稍微說一下 vue3 項目中的 hooks 的使用，其實這個 hooks 呢是和 vue2 當中的 mixin 是類似的，學習過 vue2 的小伙伴一定對 mixin 一定比較熟悉，快跟隨小編一起來學習學習吧2022-08-08
這篇文章主要介紹了vue如何在main.js中配置全局的通用公共組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
本文主要介紹一下Vue.js并附上在Node.js環(huán)境下搭建一個簡單的Demo實例代碼。條理清晰，有助于閱讀和理解。有需要的朋友可以看下2016-12-12