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', ...
随机推荐
- caffe多任务、多标签
解决的目标问题:多分类问题,比如车辆的外形和颜色,苹果的大小和颜色:多任务:车牌角点的定位和车牌的颜色.定位在技术上属于回归,车牌颜色判断则属于分类. 技术点 caffe默认是单输入任务单标签的,也就 ...
- 洛谷 P4568 [JLOI2011]飞行路线 解题报告
P4568 [JLOI2011]飞行路线 题目描述 Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在\(n\)个城市设有业务,设这些城市分别标记为0到\(n−1\ ...
- SPOJ6340 ZUMA - ZUMA
题意:n个珠子排成一排,都有各自的颜色. 你可以选择不少于w个连续同色的珠子消掉,也可以先放着.你还可以任意插入任意颜色的珠子. 求全部消掉至少要插入几个珠子. 解: 什么毒瘤东西...... 有个十 ...
- 2：jquery.cookie用法详细解析
一个轻量级的cookie 插件,可以读取.写入.删除 cookie. jquery.cookie.js 的配置 首先包含jQuery的库文件,在后面包含 jquery.cookie.js 的库文件. ...
- 界面编程之QT的数据库操作20180801
/*******************************************************************************************/ 一.数据库连 ...
- python数字前自动补零
>>> '%d' % 23 #输出23 ' >>> '%5d' % 23 #输出的数字前有3个空位,共占5个字符 ' >>> '%05d' % 2 ...
- 「Vue」父子组件之间的传值及调用方法
a.父组件向子组件传值data(){},props数据区别data中的数据可读可写,是自己的数据props是个数组,中的数据是父组件传递过来的,只读不能写<login :dmsg='msg'&g ...
- linux常用端口查询
0 | 无效端口,通常用于分析操作系统1 | 传输控制协议端口服务多路开关选择器2 | 管理实用程序3 | 压缩进程5 | 远程作业登录7 | 回显9 | 丢弃11 | 在线用户13 | 时间17 | ...
- node.js通过edge访问.net动态链接库
从了解node.js到现在经历了几个月时间,一直忙于实际的项目,没有动手写点关于node.js的代码.最近将开发工作安排就绪,个人的时间相对从容了,所以这几天开始测试一下node.js. 多年来,一直 ...
- 960网格，一个web时代的标志。
如果你不知道什么是CSS框架,可以回顾我的文章 css框架,一把锋利的剑 闲言少叙,废话不说,直入正题: 1.什么是CSS框架? 正如之前说的: CSS框架是一种你能够使用在你的web项目中概念上的结 ...