vue3当form表单只有一个input框的时候，按下回车系统自动刷新，路径就会自动生成奇怪的符号

已于 2023-11-23 13:46:40 修改
阅读量360 收藏
点赞数 2
文章标签： vue
于 2023-11-21 11:42:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45913170/article/details/134528332
版权
文章讨论了当form表单只有一个文本框时，回车通常会导致页面刷新的问题。原因是W3C标准规定单行文本输入按Enter应提交表单。为避免刷新，需在代码中添加`@submit.native.prevent`来阻止默认行为。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

现象：当form表单只有一个文本框的时候，按下回车路由会多加一个 ？，页面就会刷新

原因：按下enter键form表单会自动提交，form表单提交的时候会刷新页面， W3C 标准中有如下规定：当表单中只有一个单行文本输入框时，客户端应该接受该区域中的Enter作为提交表单的请求。这里我们阻止他刷新，再绑定一下事件就可以了

解决：添加 @submit.native.prevent 就可以了

qq_45913170
关注
Vue.js：element-ui组件库el-form表单el-input输入框按下回车键会刷新页面的问题
彭世瑜的博客
04-29 1761
当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"/> <
vue3+element-plus表格插入输入框，当遍历出多个表格的时候想使用回车事件去获取下一个输入框的
weixin_50041614的博客
09-03 1718
vue3+element-plus表格插入输入框，当遍历出多个表格的时候想使用回车事件去获取下一个输入框的
form中只有一个input按回车键表单会自动提交
qq_39640404的博客
01-18 640
form中只有一个input按回车键表单会自动提交     在一个form表单中，若只有一个input，按回车键表单会自动提交，但是当表单中存在多个input时，按回车键不会执行任何操作，这是form表单的一个特性，那么如何防止它的自动提交呢？这里提供四种方法。     第一种方法，把表单去掉，这是最管用，但也是最傻的方法，直接添加onclick事件，不用表单提交，这种方法就不赘述了。   ...
vue中，form表单内只有一个input按回车键时，@keyup.enter.native事件不生效踩坑
weixin_51409195的博客
07-10 1160
el-input v-model="form.code" placeholder="请输入code"<el-input v-model="form.code" placeholder="请输入code"问题:@keyup.enter.native外部存在form表单，并且form表单里只有一个input。修改后：此时输入框输入后按回车键即会执行codeVerify方法。原因：当form表单内只有一个input按回车键会自动提交表单。原：此时输入框输入后按回车键不会执行codeVerify方法。
解决vue3中el-input在form表单按下回车刷新页面
蜗牛~~
07-16 740
解决方法 ： 再给一个input 表单 将其设置style="display:none"中只有一个input 框则按下回车会直接关闭表单 所以导致刷新页面。点击回车之后 刷新页面。
form表单 一个input时 回车自动提交
commuli的专栏
01-11 3094
form表单 一个input时 回车自动提交问题描述 form表单中，如果当前表单只有一个input输入框时，单击回车会自动提交当前表单。 解决方案 在当前form表单中添加一个隐藏的input，<input style="display:none" mce_style="display:none"> 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
如何防止INPUT按回车自动提交表单FORM
09-01
默认情况下，当用户在表单内的输入框（INPUT）中按下回车键时，浏览器会自动提交表单，这有时并不符合开发者的设计需求。本文将详细介绍两种防止INPUT按回车自动提交表单FORM的方法。 ### 方法一：增加一个隐藏的...
解决vue+element 键盘回车事件导致页面刷新的问题
10-18
在标准中提到，当一个表单内仅有一个单行文本输入框时，用户在该输入框中按下回车键通常会被解释为提交表单的请求。浏览器随后会执行页面刷新或跳转的默认提交行为。 在Vue和Element UI结合使用的场景下，开发者...
vue input只有一个的时候回车输入的时候自动刷新解决办法
weixin_40444253的博客
02-21 258
vue input只有一个的时候回车输入的时候自动刷新解决办法
form表单中只有一个input时，按回车键后表单自动提交(form表单的一个小坑)
Hurricane_m的博客
05-27 1281
最近在给公司改项目时发现一个问题，按钮绑定回车事件后按回车表单执行js方法后表单自动提交刷新，先执行了js的方法后自动提交表单，使它相当于没有执行js方法，查阅资料得知在一个form表单中，若只有一个input，按回车键表单会自动提交，但是当表单中存在多个input时，按回车键不会执行任何操作，这是form表单的一个特性。 解决这个问题有四种方法，如下： 第一种方法，把表单去掉，这是最管用，但...
vue form 表单提交后刷新页面的方法
10-18
今天小编就为大家分享一篇vue form 表单提交后刷新页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
form 表单只有一个input 时，回车自动提交表单造成页面刷新效果
qq_39706777的博客
02-03 1990
el-form 中仅有一个input，input上设置了回车响应事件，首次按回车键后，页面刷新，再次按回车才执行了响应事件
form表单只有一项input时回车会把链接上的参数删掉
最新发布
sunyanjing_8949的博客
10-12 368
form表单只有一项input时刷新会把链接上的参数删掉。会导致链接上的参数丢失。
vue3+element-plus input输入框回车键全页面刷新
博客
11-07 1354
vue3+element-plus input输入框回车键全页面刷新
Vue表格嵌入输入框回车焦点跳到下一行的输入框
Youaremysalvatio的博客
08-23 756
使用Vue2 + Ant Design Vue。
vue3 el-form中只有一个表单时，按回车键刷新页面
weixin_43758633的博客
02-01 803
vue3 el-form中只有一个表单时，按回车键刷新页面
vue 输入网址后，url中自动出现井号#，如何去除
weixin_52297371的博客
11-22 1636
vue 输入网址后，url中自动出现井号#，如何去除
Vue按回车键进行搜索
热门推荐
weixin_49813550的博客
08-02 1万+
Vue项目按回车键进行搜索 最近有一个需求，为了用户方便进行搜索数据的时候不想点击搜索按钮，想要在表单内输入完成之后直接按回车键进行搜索。根据vue+ElementUUi完成。 下面直接上代码 1、现在el-input里面添加这一行代码 @keyup.enter.native="seachEnter" 2、写seachEnter事件 seachEnter(e) { var keyCode = window.event ? e.keyCode : e.which; if (ke
vue input 回车提交表单
09-08
要在Vue中实现在输入框中按回车键提交表单，可以使用`@keyup.enter`事件来监听回车键的按下事件。以下是一个示例代码： ```html <input type="text" v-model="inputValue" @keyup.enter="submitForm" /> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值