移动端回车键触发表单提交及相关兼容

摘要:
例如,对于搜索行为,您希望在输入关键字后立即按Enter键提交表单。对于一些复杂的表单,您可能希望避免在表单未完成时错误操作Enter键以触发表单提交。以上内容从http://blog.csdn.net/dac55300424/article/details/39158759对于移动端,ios可以插入一个无意义的文本框来隐藏,并听Enter键进行其他处理。对于Android,不建议插入。插入后,Enter键将无效。它还会监听Enter键并禁用默认事件。当移动终端点击Enter时,ios疑似会先提交表单,然后触发监听。

  我们有时候希望回车键敲在文本框(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以使浏览器表现一致。

  以上转自 http://blog.csdn.net/dac55300424/article/details/39158759

  针对移动端,ios可以插入一个无意义的文本框隐藏,监听回车键做其他处理。此时form通过监听处理。

  Android则不建议插入,插入后回车键失效,同样监听回车键并禁止默认事件。此时form通过监听处理。

  移动端点击回车的时候,ios疑似先提交form再触发监听。有待进一步考证。

免责声明:文章转载自《移动端回车键触发表单提交及相关兼容》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Leetcode#21 Merge Two Sorted Listsdocument.onclick在ios上不触发的解决方法与touchstart点击穿透处理下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

使用vue开发移动端管理后台

1.对于项目的一些心得与体会 首先的一点,就是,对于图形界面框架的选型,这个很重要,对于一项目来说,开始动手前就要对项目的设计图有个完整的了解,以便于自己选择插件或者框架; 然后就是,对于交互性操作,比如:上传图片,预览图片啥的,应该选择是否是用图形界面框架来实现还是另选专门的插件来实现 在完成项目中,我又新学到了上传图片插件vue-core-image-...

前端与移动开发基础班及就业班课程大纲(转自黑马教育培训,网络)

前端与移动开发基础班课程大纲 所处阶段 主讲内容 技术要点 学习目标 第一阶段:HTML5+CSS3 HTML5 1、浏览器与浏览器内核2、语法及使用、3、常用标签4.语义化5、表单元素6、HTML、7新增标签 可掌握的核心能力:掌握HTML5常用标签;掌握CSS语法及使用技巧;掌握CSS3新增选择器;掌...

win7下如何配置JDK环境变量

由于Win7和Win XP的不同,环境变量的配置也变得有所不同。具体操作:一、右击【计算机】--【属性】--【高级系统设置】--【高级】--【环境变量(N)…】 二、【系统变量】--【新建】 在【变量名】后的文本框输入:JAVA_HOME, 【变量值】后的文本框输入JDK安装目录,例如本人的是: D:Program FilesJavajdk1.6.0_17...

textarea聚焦的多种写法

1、textarea标签内容 复制代码代码如下: <span style="font-size:14px;"><tr><td valign="top">备注:</td><td><textarea name="" cols="" rows="" onfocus="this.cla...

在react项目中使用回车键(Enter)实现tab切换输入框的功能(以及Don't make functions within a loop no-loop-func的问题)

在这碰到的一个问题就是代码在正常的HTML文件中是没有什么问题的,但是当代码放到react项目中就会报警告Don't make functions within a loop no-loop-func(其实大致的意思就是说不要在循环中生成或嵌套函数),可能是严格模式的原因。实现方式只需要需要添加这个效果的输入框加上一个class名‘input‘,这边使用过获...

文本框输入事件:onchange 、onblur 、onkeyup 、oninput

onchange 在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性! 且必须值变化才触发 onblur 与onchange基本相同,唯一的区别是 不管值是否变化,都触发 onkeyup 只要输入框内容发生变化即可触发,但是无法检测复制粘贴 oninput 只...