表单只有一项 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 ...
随机推荐
- 基于 K8s 做应用发布的工具那么多, 阿里为啥选择灰姑娘般的 Tekton ?
作者 | 邓洪超,阿里云容器平台工程师, Kubernetes Operator 第二人,云原生应用标准交付与管理领域知名技术专家 导读:近年来,越来越多专门给 Kubernetes 做应用发布的 ...
- 云原生时代, Kubernetes 多集群架构初探
为什么我们需要多集群? 近年来,多集群架构已经成为“老生常谈”.我们喜欢高可用,喜欢异地多可用区,而多集群架构天生就具备了这样的能力.另一方面我们也希望通过多集群混合云来降低成本,利用到不同集群各自的 ...
- VS2017新建项目的模板之配置
也不知道之前装VS2017的时候,做了什么操作,新建一个WinForm项目,自动记住了我当时新建的窗体的大小816*639(默认的300*300),现在每次新建窗体都这个大小,忍了一段时间,实在忍无可 ...
- JS读取xml
xml文件 <?xml version="1.0" encoding="utf-8"?> <root> <data id=&quo ...
- PHP实现简单RPC
1.什么是rpc RPC全称为Remote Procedure Call,翻译过来为“远程过程调用”.目前,主流的平台中都支持各种远程调用技术,以满足分布式系统架构中不同的系统之间的远程通信和相互调用 ...
- csp 201809-1卖菜
问题描述 在一条街上有n个卖菜的商店,按1至n的顺序排成一排,这些商店都卖一种蔬菜. 第一天,每个商店都自己定了一个价格.店主们希望自己的菜价和其他商店的一致,第二天,每一家商店都会根据他自己和相邻商 ...
- AutoLayout的使用
虽然苹果提供了AutoresizingMask的布局方式,这个方式局限性太大:只能解决父控件和子控件间的相对关系: 因此,推出了AutoLayout:苹果官方也是推荐开发者尽量使用autolayout ...
- Hadoop 从节点的 NodeManager 无法启动
一.问题描述 日志文件信息如下: -- ::, INFO nodemanager.NodeManager (LogAdapter.java:info()) - registered UNIX sign ...
- 07.进程管理+作业控制+文件查找与压缩+文件压缩与打包+tar打包解包+NFS
进程管理 程序放在磁盘上叫文件,把它复制到内存,并在cpu运行,就叫进程, 进程多少也反映当前运行程序的多少 进程在系统中会为每个进程生成一个进程号,在所有的进程中有一个特殊进程即init进程, 它是 ...
- Truck History POJ - 1789
题目链接:https://vjudge.net/problem/POJ-1789 思路: 题目意思就是说,给定一些长度为7的字符串,可以把字符串抽象为一个点, 每个点之间的距离就是他们本身字符串与其他 ...