form表单自动提交
Posted ljy-20180122
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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表单自动提交的主要内容，如果未能解决你的问题，请参考以下文章