本文介绍: 了解并解决elementUI中form表单内单一input框回车触发刷新的问题

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

原因:elementUI中的当elform表单只存在一个elinput框时,会触发表单的默认提交事件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 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。

例:elform内单el-input触发页面刷新

<el-form :model="form" ref="form" label-width="200px" class="form"&gt;
  <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 阻止原生事件执行方法搜索按钮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

原文地址:https://blog.csdn.net/GG_Zdd/article/details/129883238

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_7119.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注