我们有时候希望通过敲击回车键在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，我们希望输入完关键词之后直接按回车键来提交表单；而有些复杂的表单，可能要避免回车键的触发行为，否则就会造成误操作。
要控制这些行为，不需要借助 JS，浏览器已经帮我们做好了这些处理，下面总结了几条规则：
1.如果表单里有一个 type="submit" 的按钮，回车键生效；
2.如果表单里只有一个 type="text" 的 input，回车键生效；
3.如果按钮不是用的 input，而是用 button，并且没有加 type，IE 下默认为 type=button，FX 默认为 type=submit；
4.其他表单元素如 textarea、select 不影响。
在实际的应用中，要让表单响应回车键很容易，只要保证表单里有个 type="submit" 按钮就行。而当只有一个文本框又不希望响应回车键该怎么办呢？我的办法有点别扭，就是再写一个无意义的文本框，然后隐藏起来。根据第三条规则，我们在用 button 的时候，尽量显示声明 type 以使浏览器表现一致。
看下面的例子：
<!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=utf-8">
<title>submit</title>
</head>
<body>
<h1>本demo演示在input框中enter键是否触发提交表单，来自 www.abaonet.com</h1>
<h2>一个表单元素的时候，提交</h2>
<form action="http://www.abaonet.com/">
<input type="text">
<input value="提交" type="button">
</form>
<h2>一个表单元素的时候，不提交</h2>
<form action="http://www.abaonet.com/">
<input type="text">
<input style="display: none;" type="text">
<input value="提交" type="button">
</form>
<h2>一个表单元素的时候，提交</h2>
<form action="http://www.abaonet.com/">
<input type="text">
<input style="display: none;" type="text">
<input value="提交" type="submit">
</form>
<h2>多个表单元素的时候，提交</h2>
<form action="http://www.abaonet.com/">
<input type="text">
<input type="text">
<input value="提交" type="submit">
</form>
<h2>多个表单元素的时候，不提交</h2>
<form action="http://www.abaonet.com/">
<input type="text">
<input type="text">
<input value="提交" type="button">
</form>
<h2>用button元素时，FX和IE下有不同的表现</h2>
<form action="http://www.abaonet.com/">
<input type="text">
<input type="text">
<button>提交</button>
</form>
</body>
</html>
分享到：
相关推荐
form表单提交方式总结一下： 一、利用submit按钮实现提交，当点击submit按钮时，触发onclick事件，由JavaScript里函数判断输入内容是否为空，如果为空，返回false, 不提交，如果不为空，提交到由action指定的地址...
详解示波器触发功能专题.pdf ........
泛微OA新增功能表单建模详解
ajaxForm()和ajaxSubmit()方法可以...//clearForm:true, //成功提交后，清除所有表单元素的值 //resetForm:true, //成功提交后，重置所有表单的值 //timeout:3000 //限制请求的时间，当请求大于3秒后，跳出请求 }
表单验证就是在表单提交服务器前对其进行一系列的检查并通知用户纠正错误，本篇文章主要介绍了详解HTML5中表单验证的8种方法，具有一定的参考价值，有兴趣的可以了解一下。
PHP_表单安全详解，PHP_表单安全详解，PHP_表单安全详解，PHP_表单安全详解
HTML表单的提交方式、HTM控件、获取HTML表单内容、乱码问题、SQL注入、服务器端表单、HTML服务器控件 HTML表单的提交方式 对于一个普通HTML表单来说，它有两个重要的属性：action和method。 action属性指明当前表单...
jquery.validate表单验证框架详解.
最近项目中用了很多的表单提交，发现input、button、submit甚至回车键都可以引发表单提交，下面将分别给大家讲述下他们在使用中的区别。
form表单，将组件内输入的”switch”,”input”,”checkbox”,”slider”,”radio”,”picker”的值进行提交,数据的格式为：name:value，所以表单中控件都需要添加name属性，否则找不到对应控件的值。其主要属性： ...
主要介绍了详解flask表单提交的两种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解servlet中处理html表单的相关知识
1.小程序相对于之前的WEB+PHP建站来说，个人理解为只是将web放到了微信端，用小程序固定的格式前前端进行布局、事件触发和数据的输送和读取，服务器端可以用任何后端语言写，但是所有的数据都要以JSON的形式返回给小...
jquery表单验证详解
(const) char 转CString 详解（字符串类型转换详解，不断补充）
单独的表单提交与表单登录都差不多，因此就不单独说了。 说明：针对curl表单提交实现登录，不是所有网站都适用，原因是有些网站后台做了限制或有其他校验。我们不知道这些网站后台的限制或校验机制具体是什么，因此...
主要为大家详细介绍了python模拟事件触发机制的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
主要介绍了spring boot 防止重复提交实现方法,结合实例形式详细分析了spring boot 防止重复提交具体配置、实现方法及操作注意事项,需要的朋友可以参考下
【form表单提交】 form.wxml： <form bindsubmit=formSubmit bindreset=formReset> 昵称：<input type=text name=nickname placeholder=请输入昵称 confirm-type=done /> 密码：<input password...
本文章向大家介绍表单的一些知识点，然后介绍PHP是如何接收表单数据并如何处理表单数据，文章以一个发送邮件的表单实例来向大家讲解表单提交及php如何处理表单数据,需要的朋友可以参考下