谈谈Enter回车键提交表单那些事

最新推荐文章于 2024-08-13 10:33:00 发布

浅唱寂寞

最新推荐文章于 2024-08-13 10:33:00 发布

阅读量1.7w

点赞数 3

分类专栏：前端 from表单enter提交文章标签： jsp html form enter

本文链接：https://blog.csdn.net/u010871655/article/details/51260878

版权

前端 from表单enter提交专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我们在做系统前端的时候，往往会用到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" οnkeydοwn="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" 中增加οnkeypress="javascript:return gosearch();"方法</span>

<span class="tag"></span>function gosearch() { 
  if(window.event.keyCode == 13) { 
    search(); 
    return false; 
  } 
}

希望对你们有帮助，顺便说一下，这个编辑器太恶心了，每次都得害我丢失内容，乱加东西，并且一点也不好用。

浅唱寂寞

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录