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表单自动提交的更多相关文章

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

    怪事年年有,今年特别多. 话说,最近项目中遇到一件怪事,当我鼠标focus在文本框中,轻轻敲了下回车键,尼玛页面突然刷新了,当时把宝宝给吓得. 接下来就是一番苦逼的烧脑和蛋疼~ 一.被表象所迷惑 突然 ...

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

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

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

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

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

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

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

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

  6. chrome、firefox表单自动提交诱因 -- 非type=hidden的单输入域（input）

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

  7. JavaScript 创建一个 form 表单并提交

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

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

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

  9. form表单js提交

    form表单js提交      $('#form1').submit(); 延迟form表单提交 function submitcheck() { $('#light').css('display', ...

随机推荐

  1. MT【180】齐次化+换元

    已知实数$a,b$满足$a^2-ab-2b^2=1,$则$a^2+b^2$的取值范围_____ 解答:$\textbf{方法一}$由已知得$(a-2b)(a+b)=1$,设$x=a-2b,y=a+b$ ...

  2. MT【172】内外圆

    $P,Q$是两个定点,M为平面内一个动点,且$\dfrac{|MP|}{|MQ|}=\lambda(\lambda>0,\lambda\ne1)$, 点M的轨迹围成的区域面积为S , 设$S=f ...

  3. 【刷题】LOJ 6010 「网络流 24 题」数字梯形

    题目描述 给定一个由 \(n\) 行数字组成的数字梯形如下图所示.梯形的第一行有 \(m\) 个数字.从梯形的顶部的 \(m\) 个数字开始,在每个数字处可以沿左下或右下方向移动,形成一条从梯形的顶至 ...

  4. 【刷题】LOJ 6007 「网络流 24 题」方格取数

    题目描述 在一个有 \(m \times n\) 个方格的棋盘中,每个方格中有一个正整数. 现要从方格中取数,使任意 \(2\) 个数所在方格没有公共边,且取出的数的总和最大.试设计一个满足要求的取数 ...

  5. node.js 开发简易的小爬虫

    node.js  开发简易的小爬虫 最近公司开发一款医药类的软件,所以需要一些药品的基础数据,所以本人就用node.js写一个简易的小爬虫,并写记录这个Demo以供大家参考. 一.开发前的准备: 1, ...

  6. Redis与memecache的区别

    转载连接: https://www.biaodianfu.com/redis-vs-memcached.html Redis的作者Salvatore Sanfilippo曾经对这两种基于内存的数据存储 ...

  7. Openstack 错误日志查看方法

    openstack错误日志查看方法 https://blog.csdn.net/ZanShichun/article/details/72672945

  8. Java基础-Java中的堆内存和离堆内存机制

    Java基础-Java中的堆内存和离堆内存机制 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.

  9. System V 与 POSIX

    System V 以及POSIX 对信号量.共享内存.消息队列等进程之间共享方式提供了自己的解决方案.因此,在学习时难免存在疑惑,到底有什么区别,哪种方式更佳.经过网上搜索各种博客,做出简单的总结. ...

  10. element-ui 设置input的只读或禁用

    只读:readonly 在data里定义:readonly: true, 然后在input框里加上readonly就可以了. 禁用:disabled 在data里定义:edit: true, 然后在i ...