怪事年年有,今年特别多。

话说,最近项目中遇到一件怪事,当我鼠标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表单自动提交的问题的更多相关文章

  1. 遇到的一个Form表单自动提交问题解决办法

    Form 表单中只有一个 input 元素时按回车会默认提交表单.有的时候我们希望按回车可以进行列表查询,但是查询后表单被自动提交了,然后刷新了整个页面.这个时候就需要对这个 Form 表单处理一下以 ...

  2. form表单自动提交

    form表单提交是web项目中经常遇到的,但是如果form中只有一个input为text类型的输入框时, 需要格外注意,因为这时候只要你按下回车键,form表单就会自动提交,这是form表单的一个特性 ...

  3. 按下enter键后表单自动提交问题

    在HTML的form表单里,按下enter键之后,默认情况下表单会自动提交. 在公司一个项目里,按下enter键自动提交表单的查询结果与按下搜索框的搜索结果页面显示不一样,按下搜索按钮之后是通过Aja ...

  4. FORM中使用onSubmit="return false"防止表单自动提交,以及submit和button提交表单的区别

    在页面中有多个input type="text"的文本输入框的情况下没有问题,但是当页面中有只有一个文本框的情况下(),就会出现此问题. 后来在form 中添加:onsubmit= ...

  5. Html 中表单提交的一些知识总结——防止表单自动提交,以及submit和button提交表单的区别

    转自:http://jackaudrey.blog.163.com/blog/static/1314217882010590041833/ 在页面中有多个input type="text&q ...

  6. 使用ajax方法实现form表单的提交(附源码)

    写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...

  7. 微信自带浏览器不支持form表单post提交方案解决

      微信自带浏览器form表单post提交,Java控制后台获取不到值得解决方案: 第一种:把post改成get请求,但是改后另一个问题来了就是,数据不安全了,连接上都能看到,导致数据会流失,Java ...

  8. 使用ajax方法实现form表单的提交

    作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...

  9. chrome、firefox表单自动提交诱因 -- 非type=hidden的单输入域(input)

    开发任务中遇到很费解的一个form自动提交问题,form中只有一个input时回车会触发自动提交表单,当在多一个非type=hidden的input时,又不会出现表单自动提交. 代码示例: 会出现自动 ...

随机推荐

  1. 泛函编程(37)-泛函Stream IO:通用的IO处理过程-Free Process

    在上两篇讨论中我们介绍了IO Process:Process[I,O],它的工作原理.函数组合等.很容易想象,一个完整的IO程序是由 数据源+处理过程+数据终点: Source->Process ...

  2. jshint配置(js检查)

    JSHint的选项配置 asi 如果是真,JSHint会无视没有加分号的行尾,自动补全分号一直是Javascript很有争议的一个语法特性.默认,JSHint会要求你在每个语句后面加上分号,但是如果你 ...

  3. chrome developer tool—— 断点调试篇

    断点,调试器的功能之一,可以让程序中断在需要的地方,从而方便其分析.也可以在一次调试中设置断点,下一次只需让程序自动运行到设置断点位置,便可在上次设置断点的位置中断下来,极大的方便了操作,同时节省了时 ...

  4. SharePoint Error - The current user is not an SharePoint Server farm administrator

    错误截图 错误日志 位置:C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\LOGS 主要错误 The c ...

  5. Atitti.java android反编译解决方案-----虚拟机方案

    Atitti.java android反编译解决方案-----虚拟机方案 哈哈,终极解决方案是虚拟机...c++也可以反编译为汇编代码,但无需担心,因为读懂汇编太麻烦..只要不能拿到c++源码就可.. ...

  6. Autodesk招聘开发咨询顾问(北京或上海),需要内推的扔简历过来啊

    Autodesk现招聘两位二次开发技术顾问,为正式编制.享受所有Autodesk优越的福利资源(额外商业保险,公积金全部由公司支付,年度奖金,季度礼物, 节日礼物, 15天年假,不定期的培训...). ...

  7. Android View各种尺寸位置相关的方法探究

    Android View各种尺寸位置相关的方法探究 本来想做一个View间的碰撞检测之类的. 动手做了才发现不是想象的那么简单. 首先,写好了碰撞检测的工具类如下: package com.mengd ...

  8. c++中的数据类型

    1.数据类型简介 c++中数据类型分为两种:预定义类型和自定义数据类型. 预定义类型:整型(int 4个字节) 字符型 布尔型 (bool) 浮点型(4个字节) 空类型:关键字void,不能用于普通变 ...

  9. JAVA Web 实现会话跟踪的技术笔记

    1.HTTP协议无状态:客户端的请求与服务器的响应所发生的一系列行为简单的说是客户发送了请求,服务器就给客户端响应,它们彼此之间都没有记录下来.如: 顾客与自动售货机 普通顾客(非会员)与商场 2.c ...

  10. Android性能优化的浅谈

    一.概要: 本文主要以Android的渲染机制.UI优化.多线程的处理.缓存处理.电量优化以及代码规范等几方面来简述Android的性能优化 二.渲染机制的优化: 大多数用户感知到的卡顿等性能问题的最 ...