关于表单回车自动提交的种种
来源:互联网 发布:wonder girls 知乎 编辑:程序博客网 时间:2024/05/17 06:37
原文地址:http://blog.600km.xyz/2015/12/21/html-auto-submit/
起因
业务场景为一个type=text的表单元素,通过ajax进行搜索。但是遇到一个bug,就是在输入之后按回车,就会自动提交表单。查找之后发现了浏览器的表单提交特性
如果只有一个text表单元素,回车会自动提交表单!!
为了避免这种bug,将表单回车后提交的场景都测试了一遍。
场景一:只有一个type=text表单元素
<form action="http://blog.600km.xyz"> <input type="text" name="username" /></form>
在此场景下,只要在input中按下回车键,就会自动提交表单。
为了避免自动提交,可以设置一个隐藏的text元素,如
<form action="http://blog.600km.xyz"> <input type="text" style="display:none" /> <input type="text" name="username" /></form>
场景二:有n个type=text和一个type=submit表单元素
<form action="http://blog.600km.xyz"> <input type="text" name="username" /> <input type="text" name="password" /> <input type="submit" value="Submit!" /></form>
在此场景下,只要在input中按下回车键,就会自动提交表单。
为了避免自动提交,网上常见的例子是在form表单中监听onkeydown事件,如果是回车输入,则返回false,阻止表单提交。
<form action="http://blog.600km.xyz" onkeydown="if(event.keyCode==13){return false;}"> <input type="text" name="username" /> <input type="text" name="password" /> <input type="submit" value="Submit!" /></form>
但是这种写法存在1个问题:如果是textarea,可能会需要回车操作。
为了解决上述问题,需要增加针对textarea的判断条件,而且还要注意兼容ie。
<script type="text/javascript">document.onkeydown = function(event) { event = event || window.event; var param = event.target || event.srcElement; // if (param.name=="username"){return true;} if (event.keyCode == 13) { if ("INPUT" == param.tagName) { return false; } }};</script><form action="http://blog.600km.xyz"> <input type="text" name="username" /> <input type="text" name="password" /> <textarea name="introduction"></textarea> <input type="submit" value="Submit!" /></form>
根据if (param.name==”username”){return true;}就可以自定义在某个表单元素中,点击回车键,就可以提交表单。
场景三:有n个type=text,没有type=submit元素
此时点击回车键时,表单不会提交。可以通过监听onkeydown事件,利用submit()方法,根据keyCode和tagName或者表单元素的name来自定义提交规则
<script type="text/javascript">document.onkeydown = function(event) { event = event || window.event; var param = event.target || event.srcElement; if (event.keyCode == 13 && param.name=="password"){ document.getElementById("entityForm").submit(); }};</script><form action="http://blog.600km.xyz" id="entityForm"> <input type="text" name="username" /> <input type="text" name="password" /> <textarea name="introduction"></textarea></form>
场景四:有n个type=text和一个button标签元素
button标签,如果未指定type,则在ie6和ie7下为type=”button”, 在ie8及chrome和火狐下为type=”submit”,为了避免这种混乱,button标签一定要指定type。
如果指定为type=”button”,则和场景三的处理方式一致,
如果是type=”submit”,则同场景二。
结语
ie的特性让web开发者抓狂,本来很多浏览器自身属性可以方便解决的问题,都需要重新造一个轮子,达到浏览器兼容。
制造轮子和规则,为了规避约定或者隐藏特性带来的不可预知的麻烦。
- 关于表单回车自动提交的种种
- 关于 回车自动提交表单
- 回车自动提交表单
- 回车自动提交表单
- 回车自动提交Form表单的问题
- 关于表单提交与回车的问题
- 关于禁止回车提交表单的js
- 表单按回车自动提交
- 取消回车自动提交表单
- 表单按回车自动提交
- 表单按回车自动提交
- 表单按回车自动提交
- 表单按回车自动提交
- 表单按回车自动提交
- 表单按回车自动提交
- IE下回车事件的表单自动提交问题
- IE/FF表单回车自动提交的问题
- 解决form表单回车自动提交
- RocketMQ使用Avro序列化生产者消费者java示例
- java后台并发插入数据问题
- python 自学笔记20151222
- 【剑指offer】之树的子结构
- c语言项目感慨
- 关于表单回车自动提交的种种
- 通过脚本自动生成 iOS的倍数图
- 拥抱高效、拥抱 Bugtags 之来自用户的声音(三)
- Android Studio Gradle 实例 task用法 Groovy string特性
- 大二上学期学习总结
- 硬盘dd复制linux系统
- gcc: error: unrecognized argument in option ‘-mabi=aapcs-linux’
- 关于kettle配置SQL SERVER2008的说明
- Android的ListView数据更新后,如何使最新的条目可以自动滚动到可视范围内?