我们在做系统前端的时候，往往会用到form标签，采用jquery插件做表单验证。我们信誓旦旦的一位把一切都做好的时候，并且检查一遍又一遍的时候，意向不到的事情发生了，也许是出于一种意外，而这种意外我们从来没有想到，我们不小心碰下了enter键，然后我们发现该走的js它没有走，跳到下一个页面，或者就直接404了。想都不用想，绝对是enter键直接把表单提交了.表单在什么情况下会enter提交呢？我们如果不想表单通过enter键提交我们应该怎么做呢？

出现自动提交的情况，有两种可能：

1.是编写了javascript代码，当用户点按Enter键时，通过js事件侦听机制触发表单的提交。

2.是利用了浏览器的默认行为（至少发现ie是这样的）。浏览器在解析网页的时候，有许多默认的行为，例如如果一个页面上有表单和一个提交按钮，那么打开页面时，焦点会自动落在这个提交按钮上面。同样如果一个表单中只有一个单行文本输入域（text），那么在这个输入域中按Enter键时，浏览器会自动提交该表单。

对于第一种情况的话我们很好理解，我们可以通过下面的方法实现：

  1.  
    <pre class="html" name="code"> $(document).keyup(function(event){
  2.  
    if(event.keyCode ==13){
  3.  
    $("#submit").trigger("click");
  4.  
    }
  5.  
    });
  1.  
  1. 但是对于第二种浏览器的默认行为，可能知道这一点的人就比较少了，有可能是浏览器在表单提交上的默认行为。
  1.     
  1.  这种情况一般都在什么时候发生呢，以ie为例，讲讲它在什么情况下会发生这样的现象
  1.
  1.  
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
  5.  
    <title>submit例子 - aspxhome.com</title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <h1>本demo演示在文本框中按enter键是否触发提交表单</h1>
  9.  
    <h2>默认情况下，一个文本框的时候，提交，不管按钮type是submit还是button</h2>
  10.  
    <form action="http://www.csdn.net">
  11.  
    <input type="text">
  12.  
    <input type="button" value="提交">
  13.  
    </form>
  14.  
    <h2>一个文本框的时候怎么才能做到不提交，方法是加一个隐藏掉的文本框</h2>
  15.  
    <form action="http://www.csdn.net">
  16.  
    <input type="text">
  17.  
    <input type="text" style="display:none">
  18.  
    <input type="button" value="提交">
  19.  
    </form>
  20.  
    <h2>只要有type为submit的按钮存在，一个文本框还是多个文本框都提交</h2>
  21.  
    <form action="http://www.csdn.net">
  22.  
    <input type="text">
  23.  
    <input type="submit" value="提交">
  24.  
    </form>
  25.  
    <h2>只要有type为submit的按钮存在，一个文本框还是多个文本框都提交</h2>
  26.  
    <form action="http://www.csdn.net">
  27.  
    <input type="text">
  28.  
    <input type="text">
  29.  
    <input type="submit" value="提交">
  30.  
    </form>
  31.  
    <h2>多个文本框的时候，不提交，用type为button的按钮就行啦</h2>
  32.  
    <form action="http://www.csdn.net">
  33.  
    <input type="text">
  34.  
    <input type="text">
  35.  
    <input type="button" value="提交">
  36.  
    </form>
  37.  
    <h2>用button元素时，FX和IE下有不同的表现</h2>
  38.  
    <form action="http://www.csdn.net">
  39.  
    <input type="text">
  40.  
    <input type="text">
  41.  
    <button>提交</button>
  42.  
    </form>
  43.  
    <h2>radio和checkbox在FX下也会触发提交表单，在IE下不会</h2>
  44.  
    <form action="http://www.csdn.net">
  45.  
    <input type="text">
  46.  
    <input type="radio" name="a">
  47.  
    <input type="checkbox" name="b">
  48.  
    <input type="checkbox" name="c">
  49.  
    <input type="button" value="提交">
  50.  
    </form>
  51.  
    <h2>type为image的按钮，等同于type为submit的效果</h2>
  52.  
    <form action="http://www.csdn.net">
  53.  
    <input type="text">
  54.  
    <input type="text">
  55.  
    <input type="image" src="/images/logo.gif">
  56.  
    </form>
  57.  
    </body>
  58.  
    </html>

  1. 我们知道了Enter键提交的原理之后我们很明显就有了相对应的解决方法

  1. 通常我们用的方法有两种:
  1. 1.我们在form标签中来禁止enter键提交
  1. <form name="form" action="" method="post" onkeydown="if(event.keyCode==13)return false;" onSubmit="return checkSubmit();"> 
  1. 2.我们可以在form中增加一个隐藏的输入框
  1. <span class="tag"><</span><span class="tag-name">input</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"text"</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"notautosubmit"</span><span>  </span><span class="attribute">style</span><span>=</span><span class="attribute-value">"display:none"</span><span class="tag">/></span>
  1. <span class="tag">其次我们可以在type = "test" 中增加onkeypress="javascript:return gosearch();"方法</span>
  1.  
    <span class="tag"></span>function gosearch() {
  2.  
    if(window.event.keyCode == 13) {
  3.  
    search();
  4.  
    return false;
  5.  
    }
  6.  
    }
  1. 希望对你们有帮助，顺便说一下，这个编辑器太恶心了，每次都得害我丢失内容，乱加东西，并且一点也不好用。
 

谈谈Enter回车键提交表单那些事 回车搜索 enter搜索的更多相关文章

  1. js防止回车(enter)键提交表单及javascript中event.keycode

      如何防止回车(enter)键提交表单,其实很简单,就一句话.onkeydown="if(event.keyCode==13)return false;"把这句写在from标签里 ...

  2. 输入框状态禁止enter键提交表单

    1:页面中如果存在input输入框和submit提交按钮时,默认按enter键会提交表单,如果我现在在做查询操作,一不小心按了enter键就会有提交表单的操作,这样显然是不合理的,所以我们要禁止按en ...

  3. 简单Demo的用户登录JSP界面IE、Firefox（chrome） Enter 键提交表单

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  4. [JS] 页面回车键提交表单-常用于登录页面

    //判断是否按下了回车键 var EnterSubmit = function(evt){ evt= window.event || evt; if (evt.keyCode == 13){ //若按 ...

  5. javascript 按ctrl和enter键提交表单

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

  6. Enter键提交表单

    input type="submit"在360浏览器上不能提交   用了这个 <input type="button" class="btn b ...

  7. jQuery回车键提交表单

    $(document).keyup(function(event) {     if(event.keyCode==13)     {         $('btnSubmit').trigger(& ...

  8. js按Enter键提交表单

    function exprint(e){ /* var keycode = event.keyCode; if (keycode == "13"){ fm.UserCode.foc ...

  9. javascript —— 禁止通过 Enter 键提交表单

    $('btn').on('keydown', function () { return false; })

随机推荐

  1. Zookeeper项目开发环境搭建（Eclipse\MyEclipse + Maven）

    写在前面的话 可详细参考,一定得去看 HBase 开发环境搭建(Eclipse\MyEclipse + Maven) 我这里,相信,能看此博客的朋友,想必是有一定基础的了.我前期写了大量的基础性博文. ...

  2. 011.Zabbix的拓扑创建

    一 Map简介 Map的作用是将各种设备用网络拓扑图的方式展示,在Zabbix中,拓扑的展示通过手动方式添加. 二 Map的添加 2.1 添加Map的背景图 #在添加Map之前可谓Map添加一个背景图 ...

  3. 001.DNS原理及配置格式

    一 dns简介 DNS(Domain Name System,域名系统),因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串. ...

  4. 运行程序，解读this指向---case5

    function OuterFn() { innerFn = function() { console.log(1); }; return this; } OuterFn.innerFn = func ...

  5. [ 转载 ] Http详解

    HTTP简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送 ...

  6. BZOJ.4180.字符串计数(后缀自动机 二分 矩阵快速幂/倍增Floyd)

    题目链接 先考虑 假设S确定,使构造S操作次数最小的方案应是:对T建SAM,S在SAM上匹配,如果有S的转移就转移,否则操作数++,回到根节点继续匹配S.即每次操作一定是一次极大匹配. 简单证明:假设 ...

  7. 放大镜Demo

    购物网站-图片细节展示-放大镜效果   垂直居中                放大镜效果源码下载

  8. 【BZOJ-4556】字符串 后缀数组+二分+主席树 / 后缀自动机+线段树合并+二分

    4556: [Tjoi2016&Heoi2016]字符串 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 657  Solved: 274[Su ...

  9. Linux学习笔记06—系统用户及用户组的管理

    一.认识/etc/passwd和/etc/shadow 1./etc/passwd 由 ‘:’ 分割成7个字段,每个字段的具体含义是: 用户名 存放账号的口令:现在存放在/etc/shadow下,在这 ...

  10. pop3_用Java发送图文并茂的HTML邮件

    package com.syj; import java.io.ByteArrayOutputStream; import java.io.FileInputStream; import java.i ...