form表单自动提交
form表单提交是web项目中经常遇到的，但是如果form中只有一个input为text类型的输入框时，
需要格外注意，因为这时候只要你按下回车键，form表单就会自动提交，这是form表单的一个特性。
如何有效的防止呢？
小编认为最简洁有效的方法就是增加一个隐藏域。比如下面的代码就可以解决问题：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="../index/login.do" method="post" >
<label for="files">用户名：</label>
<input type="text" name="userName">
<input type="text" style="display: none;">
<button type="submit">提交</button>
</form>
</body>
</body>
</html>
但是这也有个bug就是如果input框获取了焦点，但是未输入任何字符的情况下，点击回车键依旧可以提交表单。因此接下来的这种方法则规避了这一个BUG
第二种方案，就是在input为text的文本框中，增加onkeydown事件，并且当按键是回车键也就是keyCode=13时，不做处理，代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="../index/login.do" method="post">
<label for="files">用户名：</label>
<input type="text" name="userName" onkeydown="if(event.keyCode==13){return false}">
<!-- <input type="text" style="display: none;"> -->
<button type="submit">提交</button>
</form>
</body>
</body>
</html>
以上是小编在实际过程中测试的代码，如有问题，欢迎留言交流！
form表单自动提交的更多相关文章
- 按Enter键后Form表单自动提交的问题
怪事年年有,今年特别多. 话说,最近项目中遇到一件怪事,当我鼠标focus在文本框中,轻轻敲了下回车键,尼玛页面突然刷新了,当时把宝宝给吓得. 接下来就是一番苦逼的烧脑和蛋疼~ 一.被表象所迷惑 突然 ...
- 遇到的一个Form表单自动提交问题解决办法
Form 表单中只有一个 input 元素时按回车会默认提交表单.有的时候我们希望按回车可以进行列表查询,但是查询后表单被自动提交了,然后刷新了整个页面.这个时候就需要对这个 Form 表单处理一下以 ...
- FORM中使用onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别
在页面中有多个input type="text"的文本输入框的情况下没有问题,但是当页面中有只有一个文本框的情况下(),就会出现此问题. 后来在form 中添加:onsubmit= ...
- 按下enter键后表单自动提交问题
在HTML的form表单里,按下enter键之后,默认情况下表单会自动提交. 在公司一个项目里,按下enter键自动提交表单的查询结果与按下搜索框的搜索结果页面显示不一样,按下搜索按钮之后是通过Aja ...
- Html 中表单提交的一些知识总结——防止表单自动提交，以及submit和button提交表单的区别
转自:http://jackaudrey.blog.163.com/blog/static/1314217882010590041833/ 在页面中有多个input type="text&q ...
- chrome、firefox表单自动提交诱因 -- 非type=hidden的单输入域（input）
开发任务中遇到很费解的一个form自动提交问题,form中只有一个input时回车会触发自动提交表单,当在多一个非type=hidden的input时,又不会出现表单自动提交. 代码示例: 会出现自动 ...
- JavaScript 创建一个 form 表单并提交
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- 使用ajax方法实现form表单的提交(附源码)
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...
- form表单js提交
form表单js提交 $('#form1').submit(); 延迟form表单提交 function submitcheck() { $('#light').css('display', ...
随机推荐
- MT【125】四点共圆
(2017湖南省高中数学竞赛16题) \(AB\)是椭圆\(mx^2+ny^2=1(m>0,n>0,m\ne n)\)的斜率为 1 的弦.\(AB\)的垂直平分线与椭圆交于两点\(CD\) ...
- 【题解】 [HAOI2016]食物链 （拓扑排序）
懒得复制,直接贴链接吧 Solution: 水题一道,注意单独一个点的不算在食物链中,也就是\(in[i]==0\) \(out[i]==0\)的点就不计算 Code: //It is coded b ...
- HGOI 20181028 题解
HGOI 20181028(复赛备考) /* 真是暴力的一天,最后一题MLE?由于数组开得太大了!!! 270滚粗 考场上好像智商高了很多?!(假的) */ sol:暴力求解,然后没有数据范围吐槽一下 ...
- 【JLOI 2012】时间流逝（期望，树上高斯消元）
题目链接 这是一道传统的期望题,可是有一些套路值得我去掌握. 我们用$s$来表示一种状态,就是当前拥有的能量圈,是一个正整数拆分的形式. 用$f_{s}$表示如果遇到果冻鱼后丢掉了最小的能量圈后的状态 ...
- luogu3778/bzoj4898 商旅 (floyd+分数规划+spfa)
首先floyd求出来每两点间的最短距离,然后再求出来从某点买再到某点卖的最大收益 问题就变成了找到一个和的比值最大的环 所以做分数规划,二分出来那个答案r,把边权变成w[i]-r*l[i],再做spf ...
- MHN蜜罐的安装部署
MHN(Modern Honey Network),是一个用于管理和收集蜜罐数据的中心服务器.通过MHN,可以实现快速部署多种类型的蜜罐并且通过web可视化界面显示蜜罐收集的数据,目前支持的蜜罐类型有 ...
- linux basic ------ 多命令执行
当我们需要一次执行多个命令的时候,命令之间需要用连接符连接,不同的连接符有不同的效果.下面我们总结一下,加以区分. (1) ; 分号,没有任何逻辑关系的连接符.当多个命令用分号连接时,各命令之间的执 ...
- centos6 pyenv和virtualenv搭建python虚拟环境
安装pyenv 基础环境软件包安装 yum -y install gcc gcc-c++ make git patch openssl-devel zlib-devel readline-devel ...
- 创建 OpenStack云主机（十一）
创建过程 创建虚拟网络 创建m1.nano规格的主机(相等于定义虚拟机的硬件配置) 生成一个密钥对(openstack的原理是不使用密码连接,而是使用密钥对进行连接) 增加安全组规则(用iptable ...
- 浮动和margin-left负值的有趣现象
我将第二个浮动的元素的margin-left的值不断减小: 被设置元素左移,后面的元素跟着动 当被设置元素的右边界超过了前面元素的左边界,后面边的元素被前面的元素挡在外面了