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

作者:大米 来源:Koubei UED 时间:2009-02-03 13:25:00 

我们有时候希望回车键敲在文本框(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列出了一些例子:


标签:表单,提交,回车,form
0
投稿

猜你喜欢

  • antd-日历组件,前后禁止选择,只能选中间一部分的实例

    2024-04-27 15:56:35
  • Windows 下 MySQL 8.X 的安装教程

    2024-01-14 03:05:33
  • 详解mysql的limit经典用法及优化实例

    2024-01-15 19:45:25
  • Python List列表对象内置方法实例详解

    2023-08-21 12:49:58
  • MySQL为什么临时表可以重名

    2024-01-15 21:28:27
  • 使用Abot中文分词组件来开发ASP站内搜索引擎

    2007-10-18 13:36:00
  • Python操作PDF实现制作数据报告

    2022-05-09 21:41:51
  • Python使用ClickHouse的实践与踩坑记录

    2023-06-12 21:45:44
  • JS实现动态添加外部js、css到head标签的方法

    2024-05-02 16:29:45
  • Python async模块使用方法杂谈

    2023-12-12 14:46:36
  • 使用python获取邮箱邮件的设置方法

    2021-08-07 05:52:58
  • 浅谈Python2.6和Python3.0中八进制数字表示的区别

    2023-04-22 23:56:42
  • python读取和保存视频文件

    2023-11-14 06:10:20
  • 解决MSSQL2005远程连接sql2000非默认端口数据库的问题

    2024-01-28 09:41:10
  • Python Pandas 删除列操作

    2023-12-17 22:03:53
  • JavaScript+Canvas实现带跳动效果的粒子动画

    2024-04-23 09:08:06
  • Python的Django框架中自定义模版标签的示例

    2022-10-31 22:28:56
  • python文件和目录操作方法大全(含实例)

    2021-11-11 14:10:29
  • 用javascript代替marquee的滚动字幕效果代码

    2024-05-22 10:36:09
  • Django学习笔记之为Model添加Action

    2021-04-09 16:32:26
  • asp之家 网络编程 m.aspxhome.com