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. Java Try-with-resources

    目录 资源管理与 Try-Catch-Finally,旧风格 Try-with-resources 管理多个资源 自定义 AutoClosable 实现 Try-with-resources 是 ja ...

  2. 集合框架基础知识-----java基础知识

    Java集合框架 :接口:Collection.List .Set. Map:实现类:ArrayList.LinkedList.Vector.HashSet.TreeSet.HashMap.HashT ...

  3. vue.js react.js angular.js三者比较

    react和vue有许多相似之处,他们都有:1.使用虚拟DOM2.提供了响应式(reactive)和组件化(composable)的视图组件3.将注意力集中保持在核心库,而将其他功能如路由和全局状态管 ...

  4. bzoj千题计划281：bzoj4558: [JLoi2016]方

    http://www.lydsy.com/JudgeOnline/problem.php?id=4558 容斥原理 全部的正方形-至少有一个点被删掉的+至少有两个点被删掉的-至少有3个点被删掉的+至少 ...

  5. bzoj千题计划262：bzoj4868: [六省联考2017]期末考试

    http://www.lydsy.com/JudgeOnline/problem.php?id=4868 假设 最晚出成绩的是第i天 预处理 cnt[i] 表示 有多少个学生 期望出成绩的那一天 &l ...

  6. 如何克服presentation恐惧呢？

  7. [软件]在浏览器里添加MarkDown Here(插件)

    1. 先来说说这个插件的作用是什么: 用于在网页一些编辑文本的地方, 使用MacDown编辑文本 支持大部分浏览器,  https://github.com/adam-p/markdown-here ...

  8. Oracle 查看锁表进程_杀掉锁表进程 [转]

    查看锁表进程SQL语句1: select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, lo ...

  9. Value = undefined

    Value = undefined Javascript在计算机程序中,经常会声明无值的变量.未使用值来声明的变量,其值实际上是 undefined. 在执行过以下语句后,变量 carname 的值将 ...

  10. networkManger介绍

    http://www.linuxidc.com/Linux/2013-08/88809.htm