表单只有一项 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 ...
 
随机推荐
- C#中文转换为拼音NPinyin代码【转】
			
项目地址:https://code.google.com/p/npinyin/ 在一个采集的程序中,为了给每个文章起一个别名,据说有很好的别名的话,对于百度.google的收录 是很有好处的.按照Se ...
 - Spring Cloud Hystrix 熔断器(五)
			
序言 感觉hystrix很精彩,文档讲的也很好,这篇总结到哪里是哪里吧 写Hystrix之前,我们先简单的说说熔断器,和限流,这样你看完之后,就可以很容易理解Hystrix 熔断器 熔断器模式源于Ma ...
 - Ubuntu关机重启后 NVIDIA-SMI 命令不能使用
			
问题: 电脑安装好Ubuntu系统后,后续安装了显卡驱动.CUDA.cuDNN等软件,后续一直没有关机.中间系统曾经有过升级,这也是问题所在.系统升级导致内核改变,并可能导致它与显卡驱动不再匹配,所以 ...
 - Python - 输入和输出 - 第十七天
			
Python 输入和输出 在前面几个章节中,我们其实已经接触了 Python 的输入输出的功能.本章节我们将具体介绍 Python 的输入输出. 输出格式美化 Python两种输出值的方式: 表达式语 ...
 - c# 值类型和引用类型 笔记
			
参考以下博文,我这里只是笔记一下,原文会更加详细 c#基础系列1---深入理解值类型和引用类型 堆栈和托管堆c# 值类型和引用类型 红色表示——“这啥?”(真实1个问题引出3个问题) CLR支持的两种 ...
 - win10笔记本电脑连wifi显示“无internet,安全”解决办法
			
吹一波, 不出意外的话,这应该是网上最全最详细的解决办法......毕竟妹子的电脑遇到了问题,咱一定要给她解决啊. 问题描述:连上了WiFi,显示“无Internet,安全”.但实际上她的电脑是有网的 ...
 - Android中设置状态栏颜色和字体颜色
			
1.在这里设置的状态栏背景为白色,字体为暗色 创建一个方法进行设置: protected void setStatusBar() { if (Build.VERSION.SDK_INT >= B ...
 - vue学习指南:第七篇(详细) - Vue的 组件通信
			
Vue 的 父传子 子传父 一.父组件向子组件传值: 父传子 把需要的数据 传递给 子组件,以数据绑定(v-bind)的形式,传递到子组件内部,供子组件使用 缩写是(:) 1.创建子组件,在src/ ...
 - GCN实现3
			
参考 : 首先看两篇论文,大概了解一下原理性的东西: GRAPH CONVOLUTIONAL NETWORKS THOMAS KIPF, 30 SEPTEMBER 2016 http://tkipf. ...
 - apache配置项
			
环境:apache2.24 apache 官方文档:http://httpd.apache.org/docs/2.4/ 全部指令索引: http://httpd.apache.org/docs/ ...