技术资讯
回车键触发表单提交的问题
2009-02-12 08:58:00
我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。
要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则：
- 如果表单里有一个type=”submit”的按钮，回车键生效。
- 如果表单里只有一个type=”text”的input，不管按钮是什么type，回车键生效。
- 如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。
- 其他表单元素如textarea、select不影响，radio checkbox不影响触发规则，但本身在FX下会响应回车键，在IE下不响应。
- type=”image”的input，效果等同于type=”submit”，不知道为什么会设计这样一种type，不推荐使用，应该用CSS添加背景图合适些。
实际应用的时候，要让表单响应回车键很容易，保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办呢？我的方法有点别扭，就是再写一个无意义的文本框，隐藏起来。根据第3条规则，我们在用button的时候，尽量显式声明type以使浏览器表现一致。
做了一个 demo(点击查看) 列出了一些例子。
原文：http://ued.koubei.com/?p=835
上一篇：登门槛效应分析网站用户体验
近期更新
- [2023-07-26 14:17:28] 为品牌赋能，海外官网品牌数字化
- [2023-05-06 10:32:26] 青岛网站建设公司,品牌网站定制,一站式网站服务——力图数字科技
- [2023-04-27 13:47:54] 品牌定制网站建设——从满足预期到走向超预期
- [2023-04-11 09:17:49] H5页面设计开发——移动端传播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力图数字科技配套网站服务支持
- [2021-05-18 10:14:11] 青岛网站建设的流程
- [2021-04-29 10:14:38] 企业定制化官网建设项目
- [2021-03-05 10:34:45] 移动互联时代房地产行业的微信小程序解决方案
- [2021-01-22 17:29:38] 微信小程序有哪些优势？为什么要开发微信小程序？
- [2021-01-08 17:28:04] 网站建设最容易忽略的人性化设计
- [2020-12-16 16:55:32] 建设一个常规的公司网站建设成本大概是多少？
延伸阅读
- [2008-08-14 16:13:00] 注册表单中出错字段排行榜
- [2014-08-31 23:08:11] 反馈表单的确认后提交提示
- [2008-11-14 11:06:00] 表单可用性5原则
- [2012-02-02 11:40:05] WEB表单设计分析及重要性
- [2009-03-23 22:11:00] 互联网表单设计 第四章 标签(3)右对齐标签
- [2008-10-31 11:24:00] web表单按钮的使用
- [2011-11-14 17:38:57] 如何设计好网页表单的细节
- [2009-03-03 08:51:00] 设计评论表单
- [2008-11-10 22:28:00] 表单中的重置与取消按钮
- [2008-11-20 12:01:00] 网页表单中的主、次要动作
- [2009-02-18 10:45:00] 互联网表单设计—第一章 表单设计(1)
- [2016-11-08 12:33:00] 青岛网站制作如何实现自定义表单系统？
