zoukankan      html  css  js  c++  java
  • 谈谈Enter回车键提交表单那些事 回车搜索 enter搜索

       我们在做系统前端的时候,往往会用到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.  
      });

    
    
    但是对于第二种浏览器的默认行为,可能知道这一点的人就比较少了,有可能是浏览器在表单提交上的默认行为。
        
     这种情况一般都在什么时候发生呢,以ie为例,讲讲它在什么情况下会发生这样的现象
       
    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>
    
    
    我们知道了Enter键提交的原理之后我们很明显就有了相对应的解决方法
    
    
    通常我们用的方法有两种:
    1.我们在form标签中来禁止enter键提交
    <form name="form" action="" method="post" onkeydown="if(event.keyCode==13)return false;" onSubmit="return checkSubmit();"> 
    2.我们可以在form中增加一个隐藏的输入框
    <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>
    <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.  
      }
    希望对你们有帮助,顺便说一下,这个编辑器太恶心了,每次都得害我丢失内容,乱加东西,并且一点也不好用。
    
     
  • 相关阅读:
    RHEL6 建立DVD repo
    stl之std::remove_copy
    分鱼问题
    Nutch的日志系统
    log4j配置文件及nutch中的日志配置
    slf4j教程
    Java中的日期操作
    Avro基础
    【JAVA编码专题】总结
    【JAVA编码专题】深入分析 Java 中的中文编码问题
  • 原文地址:https://www.cnblogs.com/suizhikuo/p/9299030.html
Copyright © 2011-2022 走看看