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触发页面刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 一文详解Vue3中简单diff算法的实现

    一文详解Vue3中简单diff算法的实现

    这篇文章主要为大家详细介绍Vue3中简单diff算法的实现与使用,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的可以了解一下
    2022-09-09
  • vue文件上传读取文件数据进行格式校验方式

    vue文件上传读取文件数据进行格式校验方式

    该文章描述了使用Element-UI的`el-upload`组件实现文件上传前的内容校验,通过`beforeUpload`钩子读取并解析文件内容,校验其格式和数据有效性,确保符合要求后才进行上传,详细介绍了校验逻辑及上传流程
    2026-05-05
  • Vue3 如何通过虚拟DOM更新页面详解

    Vue3 如何通过虚拟DOM更新页面详解

    这篇文章主要为大家介绍了Vue3 如何通过虚拟DOM更新页面详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Vue3实现滚动条自动滚动到底部

    Vue3实现滚动条自动滚动到底部

    在Vue中,通过ref和watch结合nextTick实现滚动区域自动滚动到底部,并添加返回顶部按钮,适用于动态内容场景,供开发者参考
    2025-08-08
  • vue中使用axios post上传头像/图片并实时显示到页面的方法

    vue中使用axios post上传头像/图片并实时显示到页面的方法

    今天小编就为大家分享一篇vue中使用axios post上传头像/图片并实时显示到页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue图片file、base64与blob之间相互转换过程

    vue图片file、base64与blob之间相互转换过程

    文章总结了Vue中图片的file、base64与blob的相互转换方法,包括file转base64、base64转file、base64转blob、blob转base64、file转blob以及blob转file,个人经验分享,希望对大家有所帮助
    2025-12-12
  • Element Notification通知的实现示例

    Element Notification通知的实现示例

    这篇文章主要介绍了Element Notification通知的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue3中的事件修饰符详解

    vue3中的事件修饰符详解

    Vue3中的事件修饰符包括:.stop(阻止冒泡)、.prevent(阻止默认事件)、.self(阻止自身事件)、.capture(打乱冒泡顺序)、.once(事件只触发一次)和.passive(事件默认行为立即执行),这些修饰符可以帮助开发者更灵活地控制事件的处理方式
    2025-02-02
  • vue如何监听对象或者数组某个属性的变化详解

    vue如何监听对象或者数组某个属性的变化详解

    这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通过监听器函数接收新旧值,实现属性间的数据联动,需要的朋友可以参考下
    2024-12-12
  • vue多次打包后出现浏览器缓存的问题及解决

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

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

最新评论