element UI表单只存在一个输入框时，当输入框触发回车事件后会导致页面刷新问题？

于 2024-08-26 11:00:53 发布
阅读量336 收藏 5
点赞数 5
文章标签： ui vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36619440/article/details/141558708
版权

解决办法：在<el-form>

标签上加`@submit.native.prevent`，用以阻止刷新事件发生，回车事件继续

    <el-form :model="params" ref="queryForm" @submit.native.prevent>
              <el-form-item prop="findText">
                <el-input v-model="params.findText"  clearable
                  @keyup.enter.native="handleQuery" />
              </el-form-item>
            </el-form>
qq_36619440
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js：element-ui组件库el-form表单el-input输入框按下回车键会刷新页面的问题
彭世瑜的博客
04-29 1212
当form表单中只有一个input时，按下回车建会自动触发页面的提交功能， 产生刷新页面的行为 <el-input v-model="value" @keyup.enter.native="handleEnter"/> 需要在el-form 中阻止表单的默认提交行为 <el-form @submit.native.prevent> <el-input v-model="value" @keyup.enter.native="handleEnter"/> <
vue输入框回车页面刷新
日常笔记/总结/系列知识梳理
06-26 5027
问题描述： 在vue项目开发时，运用element-ui或者iView组件的Form组件；当Form组件中只有一个Input组件时，鼠标聚焦输入框后，点击回车键，页面就会刷新。例如以下代码： <Form :model="form"> <FormItem prop="username"> <Input v-model="form.username" placeho...
vue使用element-ui的el-input监听不了回车事件的解决方法
08-28
小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧
element-ui 输入框键盘回车事件导致页面刷新
正一品程序员的博客
07-21 960
element-ui 输入框键盘回车事件导致页面刷新
el-input 回车自动触发 window.location.reload() 事件
最新发布
m0_51496194的博客
08-09 270
1.问题：el-input 回车时自动刷新页面，而且这个刷新页面是 window.location.reload() 事件。2.原因：el-form 里面只有一个表单时，回车会触发 el-form 的原始提交事件，从而刷新页面。3.解决方法：el-form里加 @submit.native.prevent。
input输入框的一个坑，回车刷新页面，element-ui
lert707的博客
10-11 3163
input输入框会有一个坑 这是form表单的一个坑，就是当form表单中只有一个input输入框的时候，键盘回车事件就会刷新页面，因为form表单把这个事件当成了是提交表单的操作，所以解决方法是再写一个type为hidden的input标签。 另外，如果是element-ui中出现了这个问题，可以在el-form中写一个属性：@submit.native.prevent，这样也是可以解决这个问题...
el-form表单，按下回车后刷新页面的问题
猿始森林
03-29 553
当你的表单只有一项时，按下回车默认会提交表单，所以会出现刷新页面的现象。如上，指定回车或提交的事件，就可以避免刷新页面的问题。
【Vue3+Element Plus】（单 input）el-form 阻止（回车）提交时刷新页面
Louis 的博客
12-06 952
关键代码 @submit.prevent
解决vue+element 键盘回车事件导致页面刷新的问题
10-18
在使用Vue.js结合Element UI开发Web应用时，我们可能会遇到一个常见问题：在表单中通过键盘回车键触发输入事件后，页面发生刷新。这个问题通常是由于W3C标准中关于表单的默认提交行为导致的。在标准中提到，当一个...
vue3+element-plus表格插入输入框，当遍历出多个表格的时候想使用回车事件去获取下一个输入框的
weixin_50041614的博客
09-03 1594
vue3+element-plus表格插入输入框，当遍历出多个表格的时候想使用回车事件去获取下一个输入框的
结合 element-ui做一个标签管理，keyup.enter 和 blur 同时存在时，触发两次
湾湾叉会儿腰的博客
09-30 680
element-ui 有一个动态编辑标签，可以删除和添加。 但这样是不满足我的需求，我们想弄成和微博标签一样。 大概就是：下面有一个总的标签库，上面是我选择的标签，标签库可以编辑，添加，删除标签，点击总标签的标签，会变成自己选择的标签。自己选择的标签只能删除。目前我实现的效果是这样子的： 总的标签库代码如下： <!--新增标签的输入框--> <el-input class="input-new-tag" v-if="inputVisible"
Vue ElementUI Input输入框 回车事件
深度
01-28 633
@keyup.enter.native="hello"
element-ui input输入框回车事件
weixin_30896825的博客
12-18 252
<el-input maxlength="30" v-model="answerInput" @keyup.enter.native="addAnswer" placeholder="请输入问题备选答案" /> ​ 转载于:https://www.cnblogs.com/calamus/p/10136571.html...
Vue项目element ui 回车多次触发
code__monster的博客
06-08 1672
el-input keyup.enter.native是一个Vue.js指令，用于监听el-input组件上的 "enter "按键事件。实现多次搜索，或者键入值改变等需求，需要利用键盘使用el-input 中的 change 事件只有当value值改变或者不同时才会再次触发，所以可以利用keyup.enter.native。然后用键值符进行改变即可，判断处的 this.searchValue 为v-model双向绑定值，对应更改为自己的值即可。不论value值是改变与否，只要敲击回车就会调用。
解决使用elementUI密码输入框自带属性show-password出现的问题
handsome_man__的博客
06-09 3102
前提：浏览器有缓存密码 场景：一个el-form里面有一个时间框el-date-picker和一个密码框el-input，密码框使用show-password 问题：当选择缓存密码时，同时有用户名和密码，会自动打开el-date-picker选择器，这只是举个例子，当然，如果密码框上个结构都有可能影响到 解决办法：用多个el-form包裹这些组件就行，el-form互不影响...
[element-ui]el-form+el-input解决回车自动提交表单问题
xxuxioxx的博客
12-12 1670
form 表单只有一个input 时，回车自动提交表单造成页面刷新效果
ElementUI中input回车触发页面刷新问题及其解决方法
weixin_45869811的博客
09-27 289
在日常的开发过程中，你可能会遇到一个问题：在的el-form表单中，如果只存在一个el-input输入框，当你输入值后按下回车，页面会发生刷新。这是因为当form元素中只有一个输入框时，按下回车将触发表单的默认提交事件，这是W3C标准的规定。
elementui 回车 @keyup.enter.native
weixin_55648290的博客
08-03 493
elementui 回车 @keyup.enter.native
element UI表单中如何设置输入框
06-01
Element UI是一套基于Vue.js的组件库，提供了丰富的表单组件，包括输入框、下拉框、日期选择器等等。下面是使用Element UI设置输入框的步骤： 1. 安装Element UI：在命令行中使用npm或yarn安装Element UI。 ``` npm install element-ui --save ``` 2. 在Vue项目中引入Element UI：在main.js中引入Element UI并注册组件。 ``` import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 在模板中使用el-input组件：在表单中使用el-input组件来创建输入框。 ``` <template> <div> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="用户名"> <el-input v-model="form.username"></el-input> </el-form-item> </el-form> </div> </template> ``` 4. 在data属性中声明一个名为form的属性，它将作为整个表单的数据模型。 ``` <script> export default { data() { return { form: { username: '' } } } } </script> ``` 5. 当用户在输入框中输入内容时，v-model指令将自动将输入框的值与form对象中的username属性进行双向绑定，即输入框的值发生变化时，username属性也会跟着变化。 6. 最后，我们可以在模板中使用{{ form.username }}来显示输入框中的值。 注意：Element UI提供了丰富的配置项，可以根据需求自定义输入框的样式和行为。例如，可以使用placeholder属性设置输入框的占位符，使用size属性设置输入框的大小，使用clearable属性设置输入框是否可清空等等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值