表单只有一项 input 时按回车键会提交表单
在 Vue 中 使用 Element UI,使用表单 el-form 只有一个 el-input 项,使用 @keyup.enter.native 来处理回车事件。
结果发现按下回车时页面总会被刷新??
第一反应查询关键字 vue、 element、 el-form ……
结果发现是 HTML 的已知 bug(feature)……
https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2

好吧 那怎么解决呢
1. 加一个表单项 不显示就可以了。使用 <input type="hidden"> 是不行的 要用 <input type="text" style="display:none">
2. 阻止 submit 事件刷新页面 <form method="post" onsubmit="return false;">
在 Vue 中 <form v-on:submit.prevent="onSubmit"></form>
在 Element 中 <el-form @submit.native.prevent></el-form>

表单只有一项 input 时按回车键会提交表单的更多相关文章
- i利用图片按钮 和 input type="image" 为背景提交表单
<img src="img/cancel.jpg" onclick="javascript:document.getElementByIdx_x('loginFor ...
- 单档——PK单号新增、修改时不允许编辑,PK单号自动生成
由系统自动生成单号(日期+流水),用户新增.修改时不允许编辑单号: 范例(cxmt631): 1)在#单头栏位开启设定#中,即 cxmt631_set_entry(p_cmd)下: #add-poin ...
- form表单中只有一个input时,按回车键后表单自动提交(form表单的一个小坑)
form中只有一个input按回车键表单会自动提交 在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一 ...
- 使用 elementUI 的表单进行查询,表单中只有一个文本框时,回车会自动触发表单的提交事件,导致页面的刷新。
使用elementUI的el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面: 原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新. ...
- 阻止form元素内的input标签回车提交表单
<form></form>标签内input元素回车会默认提交表单. 阻止回车默认提交表单: $('form').on('keydown', function (event) { ...
- php 提交表单
滴答…滴答…的雨,欢迎大家光临我的博客. 学习是快乐的,教育是枯燥的. 博客园 首页 博问 闪存 联系 订阅 管理 随笔-58 评论-2017 文章-5 trackba ...
- js 回车提交表单的实现
我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此.比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键 ...
- java 传入用户名和密码并自动提交表单实现登录到其他系统
不用单点登录,模拟远程项目的登录页面表单,在访问这个页面的时候自动提交表单到此项目的登录action,就可以实现登录到其他系统. ssh框架项目 1.以下是本地系统的action代码: import ...
- 【转载】input 中 type='text' 的提交问题
原文链接:http://www.nowamagic.net/html/html_AboutInputSummit.php 有时候我们希望回车键敲在文本框(input element)里来提交表单(fo ...
随机推荐
- LINQ 之 LookUp
声明:本文为www.cnc6.cn原创,转载时请注明出处,谢谢! 本文作者文采欠佳,文字表达等方面不是很好,但实际的代码例子是非常实用的,请作参考. 一.先准备要使用的类: 1.Person类: cl ...
- OfType<string>()
object[] vals = { 1, "Hello", true, "World", 9.1 }; IEnumerable<double> ju ...
- C# Task,new Task().Start(),Task.Run();TTask.Factory.StartNew
1. Task task = new Task(() => { MultiplyMethod(a, b); }); task.Start(); 2. Task task = Task.Run(( ...
- WPF-数据模板深入(加载XML类型数据)
一.我们知道WPF数据模板是当我们给定一个数据类型,我们为这个数据类型写好布局,就给这种数据类型穿上了外衣. 下面这个例子,能够帮助大家充分理解数据模板就是数据类型的外衣的意思:(里面的MyListB ...
- 2019 梆梆安全java面试笔试题 (含面试题解析)
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.梆梆安全等公司offer,岗位是Java后端开发,因为发展原因最终选择去了梆梆安全,入职一年时间了,也成为了面 ...
- Java中级—转发和重定向的区别
在设计Web应用程序的时候,经常需要把一个系统进行结构化设计,即按照模块进行划分,让不同的Servlet来实现不同的功能,例如可以让其中一个Servlet接收用户的请求,另外一个Servlet来处理用 ...
- MQTT实战2 - 使用MQTTnet实现mqtt通信
MQTT实战1 - 使用Apache Apollo代理服务器实现mqtt通信 MQTT实战2 - 使用MQTTnet实现mqtt通信 源码下载 -> 提取码 QQ:505645074 MQTT ...
- 团队作业第3周——需求改进&系统设计(crtl冲锋队)
2.需求&原型改进: 1.问题:游戏中我方飞机和敌方飞机是怎么控制的? 改进: 在游戏中,我控制我方飞机,按下方向键飞机便向按下的方向移动,按下Z键,我方飞机发射子弹. 敌方飞机面向随机的方向 ...
- SpringData系列四 @Query注解及@Modifying注解@Query注解及@Modifying注解
@Query注解查询适用于所查询的数据无法通过关键字查询得到结果的查询.这种查询可以摆脱像关键字查询那样的约束,将查询直接在相应的接口方法中声明,结构更为清晰,这是Spring Data的特有实现. ...
- JavaScript实现的图片循环播放
直接上干货 <html> <head> <title>Banner Cycler</title> <script> var banners ...