elementUI中input回车触发页面刷新问题和解决方法

发布时间：2023-05-29 文章分类：WEB开发, 电脑百科 投稿人：李佳 字号： 默认 | 大 | 超大 打印

今天在做项目的的时候发现创建的el-form表单内单个el-input框输入值后点回车会导致页面刷新的问题，于是好奇心驱使下去查了vue中的form表单内的单input框也会跳转页面也就是页面刷新的问题。查了下

原因：elementUI中的当el-form表单只存在一个el-input框时，会触发表单的默认提交事件，element也给出了解释

:::tip 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.

 即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。

例：el-form内单el-input触发页面刷新

<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>

elementUI中input回车触发页面刷新问题和解决方法

 解决方法：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 阻止原生事件，执行方法为搜索按钮按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.去掉输入框的回车事件（根据需求来定，有的需要回车事件提交表单来查询或者执行其他操作则该方法不适用） 

<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的官方解决这个回车刷新页面的方案开源地址吧，如果有用点个赞啥的

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

标签 , ,