目錄前言解決方法：element也給出了解決方法注意事項：總結(jié) 前言

今天在做項目的的時候發(fā)現(xiàn)創(chuàng)建的el-form表單內(nèi)單個el-input框輸入值后點回車會導(dǎo)致頁面刷新的問題，于是好奇心驅(qū)使下去查了vue中的form表單內(nèi)的單input框也會跳轉(zhuǎn)頁面也就是頁面刷新的問題。查了下

原因：elementUI中的當(dāng)el-form表單只存在一個el-input框時，會觸發(fā)表單的默認(rèn)提交事件，element也給出了解釋

:::tip W3C 標(biāo)準(zhǔn)中有如下規(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.

即：當(dāng)一個 form 元素中只有一個輸入框時，在該輸入框中按下回車應(yīng)提交該表單。

例：el-form內(nèi)單el-input觸發(fā)頁面刷新

<el-form :model='form' ref='form' label- 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也給出了解決方法

如果希望阻止這一默認(rèn)行為，可以在 <el-form> 標(biāo)簽上添加 @submit.native.prevent。 :::

<el-form :model='form' ref='form' label-@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>

官方給出的只是阻止了這一默認(rèn)行為。當(dāng)需要回車來提交表單時可以通過下面這種操作來進行解決

<el-form :model='form' ref='form' label-@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事件[確保方法調(diào)用不丟參數(shù)]搜索按鈕 - 確保被包裹在 el-form 中搜索按鈕 - 確保按鈕的click事件去除掉搜索按鈕 - 確保增加 native-type='submit' 屬性注意事項：

那elementUI的解決了， 原生的form表單的單input和form包裹el-input回車刷新的問題也一樣可以解決

1.在form表單內(nèi)再增加一個隱藏的input框

①通過hidden定義隱藏的輸入字段

<form> <input type='hidden' value='1'></input></form>

②通過css樣式進行隱藏

<form> <input type='text' style='display:none'></input></form>

2.去掉輸入框的回車事件（根據(jù)需求來定，有的需要回車事件提交表單來查詢或者執(zhí)行其他操作則該方法不適用）

<form> <input type='text' onkeydown='ClearSubmit(e)'></input></form><script>function ClearSubmit(e) { if (e.keyCode == ) { return false; }}</script>

3.阻止表單默認(rèn)提交事件（下面例子是以form表單包裹el-input，解決 el-form中el-input回車頁面刷新的問題 原生form內(nèi)的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>

結(jié)語：給一個elementui的官方解決這個回車刷新頁面的方案開源地址吧

地址：https://github.com/ElemeFE/element/blob/a0e82aa8ac58d68e66992a5632b779a901436879/examples/docs/zh-CN/form.md

總結(jié)

到此這篇關(guān)于elementUI中input回車觸發(fā)頁面刷新問題與解決方法的文章就介紹到這了,更多相關(guān)elementUI input觸發(fā)頁面刷新內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！