zoukankan      html  css  js  c++  java
  • 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>

                                                    以上是小编在实际过程中测试的代码,如有问题,欢迎留言交流!

  • 相关阅读:
    软件需求,概要设计,详细设计(文档)
    需求文档和设计文档的区别
    Sqlyog和Navicat——mysql数据库图像化管理工具,
    Sqlyog 和Navicat
    端口占用问题
    List集合
    JSON——(JavaScript Object Notation, JS 对象简谱) 数据交换格式。JSON是一个序列化的对象或数组。
    Excel图表导出高清矢量位图片并裁剪的方法
    使用福昕PDF编辑器裁剪PDF页面
    Latex模板默认两栏的分栏的情况下怎么让图片和表格占一栏显示
  • 原文地址:https://www.cnblogs.com/ljy-20180122/p/9211366.html
Copyright © 2011-2022 走看看