谈谈Enter回车键提交表单那些事 回车搜索 enter搜索
我们在做系统前端的时候，往往会用到form标签，采用jquery插件做表单验证。我们信誓旦旦的一位把一切都做好的时候，并且检查一遍又一遍的时候，意向不到的事情发生了，也许是出于一种意外，而这种意外我们从来没有想到，我们不小心碰下了enter键，然后我们发现该走的js它没有走，跳到下一个页面，或者就直接404了。想都不用想，绝对是enter键直接把表单提交了.表单在什么情况下会enter提交呢？我们如果不想表单通过enter键提交我们应该怎么做呢？
出现自动提交的情况，有两种可能：
1.是编写了javascript代码，当用户点按Enter键时，通过js事件侦听机制触发表单的提交。
2.是利用了浏览器的默认行为（至少发现ie是这样的）。浏览器在解析网页的时候，有许多默认的行为，例如如果一个页面上有表单和一个提交按钮，那么打开页面时，焦点会自动落在这个提交按钮上面。同样如果一个表单中只有一个单行文本输入域（text），那么在这个输入域中按Enter键时，浏览器会自动提交该表单。
对于第一种情况的话我们很好理解，我们可以通过下面的方法实现：
- <pre class="html" name="code"> $(document).keyup(function(event){
- if(event.keyCode ==13){
- $("#submit").trigger("click");
- }
- });
但是对于第二种浏览器的默认行为，可能知道这一点的人就比较少了，有可能是浏览器在表单提交上的默认行为。 这种情况一般都在什么时候发生呢，以ie为例，讲讲它在什么情况下会发生这样的现象 - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=GBK">
- <title>submit例子 - aspxhome.com</title>
- </head>
- <body>
- <h1>本demo演示在文本框中按enter键是否触发提交表单</h1>
- <h2>默认情况下，一个文本框的时候，提交，不管按钮type是submit还是button</h2>
- <form action="http://www.csdn.net">
- <input type="text">
- <input type="button" value="提交">
- </form>
- <h2>一个文本框的时候怎么才能做到不提交，方法是加一个隐藏掉的文本框</h2>
- <form action="http://www.csdn.net">
- <input type="text">
- <input type="text" style="display:none">
- <input type="button" value="提交">
- </form>
- <h2>只要有type为submit的按钮存在，一个文本框还是多个文本框都提交</h2>
- <form action="http://www.csdn.net">
- <input type="text">
- <input type="submit" value="提交">
- </form>
- <h2>只要有type为submit的按钮存在，一个文本框还是多个文本框都提交</h2>
- <form action="http://www.csdn.net">
- <input type="text">
- <input type="text">
- <input type="submit" value="提交">
- </form>
- <h2>多个文本框的时候，不提交，用type为button的按钮就行啦</h2>
- <form action="http://www.csdn.net">
- <input type="text">
- <input type="text">
- <input type="button" value="提交">
- </form>
- <h2>用button元素时，FX和IE下有不同的表现</h2>
- <form action="http://www.csdn.net">
- <input type="text">
- <input type="text">
- <button>提交</button>
- </form>
- <h2>radio和checkbox在FX下也会触发提交表单，在IE下不会</h2>
- <form action="http://www.csdn.net">
- <input type="text">
- <input type="radio" name="a">
- <input type="checkbox" name="b">
- <input type="checkbox" name="c">
- <input type="button" value="提交">
- </form>
- <h2>type为image的按钮，等同于type为submit的效果</h2>
- <form action="http://www.csdn.net">
- <input type="text">
- <input type="text">
- <input type="image" src="/images/logo.gif">
- </form>
- </body>
- </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>- <span class="tag"></span>function gosearch() {
- if(window.event.keyCode == 13) {
- search();
- return false;
- }
- }
希望对你们有帮助，顺便说一下，这个编辑器太恶心了，每次都得害我丢失内容，乱加东西，并且一点也不好用。
谈谈Enter回车键提交表单那些事 回车搜索 enter搜索的更多相关文章
- js防止回车(enter)键提交表单及javascript中event.keycode
如何防止回车(enter)键提交表单,其实很简单,就一句话.onkeydown="if(event.keyCode==13)return false;"把这句写在from标签里 ...
- 输入框状态禁止enter键提交表单
1:页面中如果存在input输入框和submit提交按钮时,默认按enter键会提交表单,如果我现在在做查询操作,一不小心按了enter键就会有提交表单的操作,这样显然是不合理的,所以我们要禁止按en ...
- 简单Demo的用户登录JSP界面IE、Firefox（chrome） Enter 键提交表单
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- [JS] 页面回车键提交表单-常用于登录页面
//判断是否按下了回车键 var EnterSubmit = function(evt){ evt= window.event || evt; if (evt.keyCode == 13){ //若按 ...
- javascript 按ctrl和enter键提交表单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- Enter键提交表单
input type="submit"在360浏览器上不能提交 用了这个 <input type="button" class="btn b ...
- jQuery回车键提交表单
$(document).keyup(function(event) { if(event.keyCode==13) { $('btnSubmit').trigger(& ...
- js按Enter键提交表单
function exprint(e){ /* var keycode = event.keyCode; if (keycode == "13"){ fm.UserCode.foc ...
- javascript —— 禁止通过 Enter 键提交表单
$('btn').on('keydown', function () { return false; })
随机推荐
- 【Java】快速排序的非递归实现
快速排序一般采用递归方法(详见快速排序及其优化),但递归方法一般都可以用循环代替.本文实现了java版的非递归快速排序. 更多:数据结构与算法合集 思路分析 采用非递归的方法,首先要想到栈的使用,通过 ...
- PowerDesigner的安装
1.下载 2.步骤 3.效果 二:破解 1.参考文档 https://www.7down.com/soft/180716.html 2.说明 主要是一个文件,替换掉文件中的文件即可.
- Java之路（二） 操作符
操作符比较简单,这里只点一下注意事项和要点,请牢记. 操作符接受一个或多个参数,并生成一个新值. Java中,几乎所有的操作符都只能操作基本类型. 例外是 = == 和 !=,它们可以操作所有的对象. ...
- java学习之租车系统
背景:有三种类型的车供给用户来租用 要求:控制台用户交互界面,根据用户需求输出租车价格,结果如下: 创建租车类主要设计过程: 创建租车类 创建Car父类,包含四种属性成员,重写构造方法 创建三种 ...
- 005.MySQL双主-Master01可用配置
[root@Master01 ~]# vim /etc/keepalived/keepalived.conf ! Configuration File for keepalived global_de ...
- HDU 5745 La Vie en rose 暴力
La Vie en rose 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5745 Description Professor Zhang woul ...
- MIPS Mars 安装
Mars 4.5下载 Java 环境配置好了以后可以直接双击打开 Mars
- j.u.c系列（10）---之并发工具类：Semaphore
写在前面 Semaphore是一个计数信号量,它的本质是一个"共享锁". 信号量维护了一个信号量许可集.线程可以通过调用acquire()来获取信号量的许可:当信号量中有可用的许可 ...
- MikroTik RouterOS安装chr授权到阿里云虚拟机（转）
CHR介绍 CHR(Cloud Hosted Router) 是用于在虚拟机上运行的 RouterOS 版本,它支持x86_64架构,支持大多数流行的虚拟化技术,如 VMWare, Hyper-V, ...
- Android的GridView控件点击图片变暗效果
@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setC ...