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

已于 2023-11-23 13:46:40 修改
阅读量258 收藏
点赞数 1
文章标签： vue
于 2023-11-21 11:42:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45913170/article/details/134528332
版权

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

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

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

qq_45913170
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3+element-plus表格插入输入框，当遍历出多个表格的时候想使用回车事件去获取下一个输入框的
weixin_50041614的博客
09-03 1515
vue3+element-plus表格插入输入框，当遍历出多个表格的时候想使用回车事件去获取下一个输入框的
vue3+element-plus input输入框回车键全页面刷新
博客
11-07 919
vue3+element-plus input输入框回车键全页面刷新
vue3 键盘事件 回车发送消息，ctrl+回车 内容换行
最新发布
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
05-16 577
【代码】vue3 键盘事件 回车发送消息，ctrl+回车 内容换行。
Vue表格嵌入输入框回车焦点跳到下一行的输入框
Youaremysalvatio的博客
08-23 571
使用Vue2 + Ant Design Vue。
vue3 el-form中只有一个表单时，按回车键刷新页面
weixin_43758633的博客
02-01 653
vue3 el-form中只有一个表单时，按回车键刷新页面
vue 输入网址后，url中自动出现井号#，如何去除
weixin_52297371的博客
11-22 1379
vue 输入网址后，url中自动出现井号#，如何去除
vue3-json-schema-form:基于jsonschema的vue3表单生成器
05-23
vue3-json-schema-form a form generator based on jsonschema for vue3 Project setup npm install npm run serve ...表单的数据结果，你可以从外部改变这个 value，在表单被编辑的时候，会通过onChange透出
form-design-next:动态表单页面设计-自动生成页面--vue3.0版本
03-31
动态表单页面设计-Vue3.0版本Vue3 +打字稿+ Element-Plus重构中...自动生成H5页面，一些简单的页面无需前端参与，运营人员自己新建修改即可QQ交流群： 扫码加群：项目设置npm install编译和热重装以进行开发npm run ...
Vue-input框checkbox强制刷新问题
10-17
在Vue.js中，`<input type="checkbox">` 用于创建可勾选的复选框。在处理Vue的input框，特别是checkbox时，有时会遇到数据已经更新，但视图并未正确反映这些更新的情况。这通常涉及到Vue的响应式系统的运作机制。在...
vue form 表单提交后刷新页面的方法
10-18
今天小编就为大家分享一篇vue form 表单提交后刷新页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用Vue动态生成form表单的实例代码
08-27
FormCreate是一个基于Vue的动态form表单生成器，可以生成具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素，以及省市区三级联动、时间选择、日期选择、颜色选择、文件/图片上传...
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 点击回车触发事件和遇到的坑
Liu_JiaqiPro的博客
12-09 1115
<el-input ref="google" v-model="Code" @keyup.enter="submit()" autocomplete="off" placeholder="请输入内容" style="margin-top: 20px" > </el-input> @keyup.enter="方法名" 一般我们写表单的时候一般放在.
vue登陆页面中添加的点击回车键登陆事件在其他页面中也会被触发
half_sugar的博客
05-21 862
一、今天给项目添加了点击回车键登陆的功能，但是在测试中发现无论在哪个页面点击回车键都会触发登陆事件。 document.onkeypress = (val) => { if (val.keyCode === 13) { this.loginBtn() } }; 二、出现这个问题的原因暂时不明，解决办法是在触发登陆事件前判断当前路由是否在登陆页面下。 document.onkeypress = (val) => {
Vue使用回车键失效的解决方法
小小渔夫
06-23 4739
回车失效原因 查考相关文档得知：即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 标签上添加 。
vue 输入框回车触发提交 自留笔记
weixin_45753961的博客
06-07 468
【代码】vue 输入框回车触发提交 自留笔记。
Vue3--input回车事件，跳到下一个输入框 （非脚手架）
weixin_42064877的博客
08-18 1776
Vue3--input回车事件，跳到下一个输入框 （非脚手架）
Vue3 的 回车（enter）事件
News777的博客
09-02 9130
Vue3 的 回车（enter）事件
vue+element-plus组件，文本框输入内容按Enter键页面刷新问题
qq_52065282的博客
05-19 1275
在el-form表单组件中，el-input组件输入内容后按下Enter键刷新了整个页面，在此之前并没有对Enter键做任何处理当表单中只有一个文本输入框时，按下Enter键会自动提交表单。
vue input 回车提交表单
09-08
要在Vue中实现在输入框中按回车键提交表单，可以使用`@keyup.enter`事件来监听回车键的按下事件。以下是一个示例代码： ```html <template> <div> <input type="text" v-model="inputValue" @keyup.enter="submitForm" /> <button @click="submitForm">Submit</button> </div> </template> <script> export default { data() { return { inputValue: '' }; }, methods: { submitForm() { // 在这里触发提交表单的操作 // 例如：发送网络请求或执行其他逻辑 console.log('Form submitted!'); } } }; </script> ``` 在上面的示例中，使用`v-model`指令将输入框的值绑定到`inputValue`属性上。然后，使用`@keyup.enter`事件监听回车键的按下事件，当回车键被按下时，会触发`submitForm`方法。在`submitForm`方法中，你可以执行提交表单的操作，比如发送网络请求或执行其他逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值