快捷導(dǎo)航

elementUI中input回車觸發(fā)頁(yè)面刷新問(wèn)題與解決方法

更新時(shí)間：2023年07月12日 11:37:02 作者：GG_Zdd

這篇文章主要給大家介紹了關(guān)于elementUI中input回車觸發(fā)頁(yè)面刷新問(wèn)題與解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用elementUI具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

前言

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

原因：elementUI中的當(dāng)el-form表單只存在一個(gè)el-input框時(shí)，會(huì)觸發(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)一個(gè) form 元素中只有一個(gè)輸入框時(shí)，在該輸入框中按下回車應(yīng)提交該表單。

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

<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也給出了解決方法

如果希望阻止這一默認(rèn)行為，可以在 <el-form> 標(biāo)簽上添加 @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>

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

<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>
//注意事項(xiàng)
el-form 方式 確保使用 @submit.native.prevent 阻止原生事件，執(zhí)行方法為搜索按鈕按click事件
[確保方法調(diào)用不丟參數(shù)]
搜索按鈕 - 確保被包裹在 el-form 中
搜索按鈕 - 確保按鈕的click事件去除掉
搜索按鈕 - 確保增加 native-type="submit" 屬性

注意事項(xiàng)：

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

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

①通過(guò)hidden定義隱藏的輸入字段

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

②通過(guò)css樣式進(jìn)行隱藏

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

2.去掉輸入框的回車事件（根據(jù)需求來(lái)定，有的需要回車事件提交表單來(lái)查詢或者執(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回車頁(yè)面刷新的問(wèn)題原生form內(nèi)的input可用onsubmit句柄返回false來(lái)解決）

<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é)語(yǔ)：給一個(gè)elementui的官方解決這個(gè)回車刷新頁(yè)面的方案開(kāi)源地址吧

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

總結(jié)

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

您可能感興趣的文章: