elementUI中input回车触发页面刷新问题与解决方法
前言
今天在做项目的的时候发现创建的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的官方解决这个回车刷新页面的方案开源地址吧
总结
到此这篇关于elementUI中input回车触发页面刷新问题与解决方法的文章就介绍到这了,更多相关elementUI input触发页面刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue前端获取/切换麦克风、播放采集音频和采集音量大小完整代码
这篇文章主要给大家介绍了关于vue前端获取/切换麦克风、播放采集音频和采集音量大小的相关资料,文中通过图文以及代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-12-12element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码
这篇文章主要介绍了element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11el-table 树形数据 tree-props 多层级使用避坑
本文主要介绍了el-table 树形数据 tree-props 多层级使用避坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
最新评论