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

 更新时间:2023年07月12日 11:37:02   作者:GG_Zdd  
这篇文章主要给大家介绍了关于elementUI中input回车触发页面刷新问题与解决方法,文中通过实例代码介绍的非常详细,对大家学习或者使用elementUI具有一定的参考学习价值,需要的朋友可以参考下

前言

今天在做项目的的时候发现创建的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>

解决方法: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

总结 

到此这篇关于elementUI中input回车触发页面刷新问题与解决方法的文章就介绍到这了,更多相关elementUI input触发页面刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue前端获取/切换麦克风、播放采集音频和采集音量大小完整代码

    vue前端获取/切换麦克风、播放采集音频和采集音量大小完整代码

    这篇文章主要给大家介绍了关于vue前端获取/切换麦克风、播放采集音频和采集音量大小的相关资料,文中通过图文以及代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-12-12
  • Vue3实现刷新页面局部内容的示例代码

    Vue3实现刷新页面局部内容的示例代码

    本文主要介绍了Vue3实现刷新页面局部内容的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】

    element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码

    这篇文章主要介绍了element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • vue 卸载eslint方式

    vue 卸载eslint方式

    这篇文章主要介绍了vue 卸载eslint方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 解决vue过滤器filters获取不到this对象的问题

    解决vue过滤器filters获取不到this对象的问题

    这篇文章主要介绍了解决vue过滤器filters获取不到this对象的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01
  • vue关于重置表单数据出现undefined的解决

    vue关于重置表单数据出现undefined的解决

    这篇文章主要介绍了vue关于重置表单数据出现undefined的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • el-table 树形数据 tree-props 多层级使用避坑

    el-table 树形数据 tree-props 多层级使用避坑

    本文主要介绍了el-table 树形数据 tree-props 多层级使用避坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • 深度解析 Vue3 的响应式机制

    深度解析 Vue3 的响应式机制

    这篇文章主要介绍了深度解析 Vue3 的响应式机制,今天就带大家深入了解一下 Vue 3 的响应式机制,相信学完今天的内容,会对响应式机制有更深地体会;文章会结合代码示例,帮大家掌握响应式机制的进阶用法,让我们正式开始学习吧
    2022-09-09
  • vue多次打包后出现浏览器缓存的问题及解决

    vue多次打包后出现浏览器缓存的问题及解决

    这篇文章主要介绍了vue多次打包后出现浏览器缓存的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue路由router详解

    Vue路由router详解

    这篇文章主要介绍了vue router 配置路由的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2021-10-10

最新评论