说说回车键触发表单提交的问题

说说回车键触发表单提交的问题 By 大米

我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。

要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则：
1、如果表单里有一个type=”submit”的按钮，回车键生效。
2、如果表单里只有一个type=”text”的input，不管按钮是什么type，回车键生效。
3、如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。
4、其他表单元素如textarea、select不影响，radio checkbox不影响触发规则，但本身在FX下会响应回车键，在IE下不响应。
5、type=”image”的input，效果等同于type=”submit”，不知道为什么会设计这样一种type，不推荐使用，应该用CSS添加背景图合适些。

实际应用的时候，要让表单响应回车键很容易，保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办呢？我的方法有点别扭，就是再写一个无意义的文本框，隐藏起来。根据第3条规则，我们在用button的时候，尽量显式声明type以使浏览器表现一致。

做了一个demo列出了一些例子。

注：文章和demo于2009-2-2更新

Tags: 回车键, 提交, 表单

This entry was posted on 星期四, 一月 22nd, 2009 at 7:34 下午 and is filed under 前端开发. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

14 Responses to “说说回车键触发表单提交的问题”

一瞬说：

二月 1, 2009于8:47 上午

漏了个
一瞬说：

二月 1, 2009于8:48 上午

input type=”image”
fireplume 说：

二月 2, 2009于12:53 下午

主要还是submit 和button之间的区别，
另外，底下的回复框在firefox3下会被撑大～
dang 说：

二月 7, 2009于6:23 下午

总结的很详细，受益良多！…
elizabb 说：

二月 10, 2009于1:43 下午

原来如此~
cloud 说：

二月 10, 2009于2:29 下午

.net中这个问题很麻烦
aoao 说：

二月 10, 2009于11:33 下午

type=”image” 会带坐标提交
沙漠说：

二月 25, 2009于3:53 下午

type=”image” 会带坐标提交,后面会跟一个X=多少Y=多少的东西,这个很不爽.很多大的网站都有这样的问题.
汗蒸房说：

三月 4, 2009于2:20 下午

也有问题。
wps 说：

四月 10, 2009于9:07 上午

浏览器越来越多，网页设计标准化也难了，又是submit 又是button
zhujjcn 说：

五月 5, 2009于12:58 下午

N年前困扰我们的搜索页回车提交，不管一堆onsubmit函数的问题（还是提交两次），是否也在这里一并给个解答
具体情况都快依稀了啊呵呵
cha369 说：

五月 8, 2009于3:24 下午

ie下回车不会罢submit按钮作为一个变量提交,
ff下会, 所以在服务端判断的时候不要以此为提交的依据,
应当显性的重新声明一个判断的依据
说说回车键触发表单提交的问题（转） « RIA sky 说：

六月 22, 2009于2:48 下午

[...] 原文：http://ued.koubei.com/?p=835 [...]
izyA 说：

八月 4, 2009于11:05 上午

type=”image”会带上点击位置坐标提交, 只是因为很多人只是为了加张图就用type=”image”

Koubei UED