按Enter键后Form表单自动提交的问题
怪事年年有,今年特别多。
话说,最近项目中遇到一件怪事,当我鼠标focus在文本框中,轻轻敲了下回车键,尼玛页面突然刷新了,当时把宝宝给吓得。
接下来就是一番苦逼的烧脑和蛋疼~
一、被表象所迷惑
突然出现这种情况,脑海中第一反应是,keydown事件是不是出问题了,然后找啊找啊找啊,然后没有然后。
在把input元素上的所有事件移除掉后,我自信的按了一下enter键。艾玛,又刷新了。心里那个苦哎。
二、列出所有可能
一阵捣鼓之后,脑海中列出了所有按下enter键后的改变,url改变,多了一个问号和参数,页面刷新。心中顿时有个想法,然后确定了一下input元素在form中。这是大致可以得出原因应该是按下enter键后,表单提交了。尼玛,这是什么鬼。
三、水落石出 开心o(* ̄▽ ̄*)ブ
找到原因后,有不知道为什么。这时候只能搬出度娘了,结果得出当表单中只有一个input输入元素时,点击enter键,form表单会自动提交。
四、结论
其实知道原因解决起来还是很简单的,比如多加一个input元素设置display:none,利用事件阻止表单提交等等。下面是列出我的solution
<form onsubmit="return false">
<input type="text" name="test"/>
</form>
总的来说,适合自己的才是好的,遇到问题要仔细分析,跟着感觉走,不要盲目相信经验。当一个问题花了比较多的时间,就要反思是否思路不对还是方法有误,要跳出固定思维,抽丝拨茧地去分析所有可能的原因。
按Enter键后Form表单自动提交的问题的更多相关文章
- 遇到的一个Form表单自动提交问题解决办法
Form 表单中只有一个 input 元素时按回车会默认提交表单.有的时候我们希望按回车可以进行列表查询,但是查询后表单被自动提交了,然后刷新了整个页面.这个时候就需要对这个 Form 表单处理一下以 ...
- form表单自动提交
form表单提交是web项目中经常遇到的,但是如果form中只有一个input为text类型的输入框时, 需要格外注意,因为这时候只要你按下回车键,form表单就会自动提交,这是form表单的一个特性 ...
- 按下enter键后表单自动提交问题
在HTML的form表单里,按下enter键之后,默认情况下表单会自动提交. 在公司一个项目里,按下enter键自动提交表单的查询结果与按下搜索框的搜索结果页面显示不一样,按下搜索按钮之后是通过Aja ...
- FORM中使用onSubmit="return false"防止表单自动提交,以及submit和button提交表单的区别
在页面中有多个input type="text"的文本输入框的情况下没有问题,但是当页面中有只有一个文本框的情况下(),就会出现此问题. 后来在form 中添加:onsubmit= ...
- Html 中表单提交的一些知识总结——防止表单自动提交,以及submit和button提交表单的区别
转自:http://jackaudrey.blog.163.com/blog/static/1314217882010590041833/ 在页面中有多个input type="text&q ...
- 使用ajax方法实现form表单的提交(附源码)
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...
- 微信自带浏览器不支持form表单post提交方案解决
微信自带浏览器form表单post提交,Java控制后台获取不到值得解决方案: 第一种:把post改成get请求,但是改后另一个问题来了就是,数据不安全了,连接上都能看到,导致数据会流失,Java ...
- 使用ajax方法实现form表单的提交
作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...
- chrome、firefox表单自动提交诱因 -- 非type=hidden的单输入域(input)
开发任务中遇到很费解的一个form自动提交问题,form中只有一个input时回车会触发自动提交表单,当在多一个非type=hidden的input时,又不会出现表单自动提交. 代码示例: 会出现自动 ...
随机推荐
- 自行实现PHP代码注解特性
PHP 注解 到目前为止,PHP的反射特性中是不支持注解Annotation的,但是可以支持基本的文档注释内容的获取 ReflectionMethod::getDocComment() - 从5.1. ...
- 解决SublimeCodeIntel回车换行误打代码
SublimeCodeIntel会自动匹配并联想词汇, 这在换行的时候非常麻烦, 每次点Enter 都会误打出代码, 解决办法分两步:第一步是在Perferences/setting User 中加入 ...
- Java继承中成员方法的overload(重载/过载)
如果Java基础类有一个方法名被"过载"使用多次,在衍生类里对那个方法名的重新定义就不会隐藏任何基础类的版本.所以无论方法在这一级还是在一个基础类中定义,过载都会生效. publi ...
- Nodejs与ES6系列2:Promise对象
2.promise对象 js单线程异步执行的特性,因此在代码中充斥着回调函数.随着回调函数的增加,代码的可读性会愈来愈差,因此引入promise对象是不错的一种选择,可以避免层层回调函数.在ECMA6 ...
- 关于HTML面试题汇总之visibility
一.页面可见性(visibility) 主要提供两个属性,一个事件(都在document对象上):1. 属性: 1.1. hidden:获取或设置当前页面的可见性,boolean值: 1.2 ...
- Owl Carousel – 支持触摸的 jQuery 响应式传送带插件
Owl Carousel 是一个 jQuery 插件,使我们能够迅速地创建响应式传送带滑块.这个插件是触摸友好的,能与几乎任何的 HTML 内容兼容使用.另外,强大的选项设置支持分页/滑动速度,启用/ ...
- HTML表格边框的设置小技巧
对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 对于很多初学HTML的人来说,表格<table>是最常用的标签了 ...
- float 和 inline-block的心得
float 优点: 横向排列时比较方便,不存在浏览器兼容问题. 缺点: 1)多行横向排行时,换行后经常不能顶行显示. 2)浮动后会跳出当前流,造成父元素高度塌陷,解决办法比较成熟统一 ,不存在浏览器兼 ...
- ng-cordova 手机拍照或从相册选择图片
1.需求描述 实现一个调用摄像头拍照,或者直接打开本地图库选择照片,然后替换App中图片的功能 2.准备 1) 安装ng-cordova 进入到ionic工程目录,使用bower工具安装, bower ...
- PHP学习之登录以及后台商品展示
1.3用户登录 用户登录成功后跳转到商品显示页面 1.3.1设计界面 1.新建一个login.php页面,用来做用户的登录 2.登录业务原理 通过输入的用户名和密码查询对应的记录,表示登陆成功,否则登 ...