按Enter键后Form表单自动提交的问题

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

话说,最近项目中遇到一件怪事,当我鼠标focus在文本框中,轻轻敲了下回车键,尼玛页面突然刷新了,当时把宝宝给吓得。

接下来就是一番苦逼的烧脑和蛋疼~

一、被表象所迷惑

突然出现这种情况,脑海中第一反应是,keydown事件是不是出问题了,然后找啊找啊找啊,然后没有然后。

在把input元素上的所有事件移除掉后,我自信的按了一下enter键。艾玛,又刷新了。心里那个苦哎。

二、列出所有可能

一阵捣鼓之后,脑海中列出了所有按下enter键后的改变,url改变,多了一个问号和参数,页面刷新。心中顿时有个想法,然后确定了一下input元素在form中。这是大致可以得出原因应该是按下enter键后,表单提交了。尼玛,这是什么鬼。

三、水落石出 开心o(* ̄▽ ̄*)ブ

找到原因后,有不知道为什么。这时候只能搬出度娘了,结果得出当表单中只有一个input输入元素时,点击enter键,form表单会自动提交。

四、结论

其实知道原因解决起来还是很简单的,比如多加一个input元素设置display:none,利用事件阻止表单提交等等。下面是列出我的solution

1 <form onsubmit="return false">
2     <input type="text" name="test"/>
3 </form>

总的来说,适合自己的才是好的,遇到问题要仔细分析,跟着感觉走,不要盲目相信经验。当一个问题花了比较多的时间,就要反思是否思路不对还是方法有误,要跳出固定思维,抽丝拨茧地去分析所有可能的原因。

时间: 2024-10-13 01:03:04

按Enter键后Form表单自动提交的问题的相关文章

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

Form 表单中只有一个 input 元素时按回车会默认提交表单.有的时候我们希望按回车可以进行列表查询,但是查询后表单被自动提交了,然后刷新了整个页面.这个时候就需要对这个 Form 表单处理一下以满足在只有一个 input 元素时也能回车查询. 基本表单如下: <html> <head></head> <body> <form action='XXX' name='searchForm' method='post'> 查询: <inpu

form表单自动提交

form表单提交是web项目中经常遇到的,但是如果form中只有一个input为text类型的输入框时, 需要格外注意,因为这时候只要你按下回车键,form表单就会自动提交,这是form表单的一个特性. 如何有效的防止呢? 小编认为最简洁有效的方法就是增加一个隐藏域.比如下面的代码就可以解决问题:   <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding=&qu

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

在HTML的form表单里,按下enter键之后,默认情况下表单会自动提交. 在公司一个项目里,按下enter键自动提交表单的查询结果与按下搜索框的搜索结果页面显示不一样,按下搜索按钮之后是通过Ajax请求返回结果:而按下enter键是直接post请求然后跳转返回一个页面,失去了页面样式及导航等. 一开以为是写了js代码导致按下enter键之后会触发表单提交,后来把js代码全部移除也是一样地按下enter键会触发表单提交.到网上搜索发现是因为默认情况下在form表单内按下enter键会触发表单自

Extjs的form表单自动装载数据(通过Ext.data.Model的代理加载数据)

在做项目的时候遇到一个问题,以前双击grid页面一行数据的时候,会吧双击这一行的数据自动加载到双击的页面(Ext的弹出框),可以通过this.down(''form).getForm().loadRecord(record)来自动加载,可是现在有一个需求就是双击grid一行弹出一个新的浏览器页面(不是ext的弹出框,通过window.open()实现),只能把双击的id传到页面,再重新查数据手动赋值,如果一个页面字段很多,一个一个赋值是很辛苦的,所以就想能不能自动装载数据 通过长时间研究发现,t

表单自动提交问题整理

表单自动提交问题 问题描述 二是利用了浏览器的默认行为(至少发现ie是这样的).浏览器在解析网页的时候,有许多默认的行为,例如: * 如果一个页面上有表单和一个提交按钮,那么打开页面时,焦点会自动落在这个提交按钮上面. * 同样如果一个表单中只有一个单行文本输入域(text),那么在这个输入域中按Enter键时,浏览器会自动提交该表单. 我们对于第一种情况一般都知道而且很容易理解,但是对于第二种浏览器的默认行为,可能知道这一点的人就比较少了,下面我具体看一下浏览器(至少ie如此)在表单提交上的默

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

转http://www.cnblogs.com/han-1034683568/p/7199168.html 写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化. 一般这种异步的操作,我们都会想到ajax方式,因此在实现了功能后就整理了这篇文章,通过ajax方法实现form表单的提交并进行后续

JavaWeb学习总结(十一):Session解决form表单重复提交

在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提交的常见应用场景 有如下的form.jsp页面 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML>

JavaScript 创建一个 form 表单并提交

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input onclick="MakeForm()" type="button" class="btn grey"

form表单的提交方式

开发中表单提交是很常见的,表单的提交方式也多种方式. 1.使用submit按钮提交表单  <input type="submit"/> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>form表单提交方式</title> </head> <body>