Form表单动作在不同浏览器下的反应

最近在做项目的时候遇到个form在IE6.0浏览器下，按回车自动提交的问题，就因为只有1个type=text，按回车键就自动提交了，用js脚本都无法控制。在网上找到一些相关信息后，突然很有兴趣对各个浏览器下的form反应做一个测试。于是通过这篇文章把不同浏览器下的form反应都记录下来。 以下是一些测试结果，通过这个测试页面，可以了解的更清楚一点。

1  form中只有1个input[type="submit"]

测试结果： javascript阻止form.submit行为，按回车，自动提交表单;

2  form中有1个input[type="text"]和1个input[type="submit"]

测试结果： （1）javascript阻止form.submit和btn.onclick行为: 按回车，不自动提交表单 —— Firefox, Chrome, Opera, Safari; 按回车，自动提交表单 —— IE6.0; （2）只阻止btn.onclick行为: 效果同上; （3）只阻止form.submit行为: 均提交表单；

3, form中有2个以上input[type="text"]和1个input[type="submit"]

测试结果： （1）javascript阻止form.submit和btn.onclick行为: 按回车，不能提交表单 — IE6.0, Firefox, Chrome, Opera, Safari （2）只阻止btn.onclick行为: 效果同上; （3）只阻止form.submit行为:  均提交表单；

4, 无form，只有1个input[type="text"]和1个input[type="submit"]，用javascript控制跳转，

测试回车是否触发click事件

测试结果： 按回车，不触发跳转行为 —— Firefox, Chrome, Opera, Safari 按回车，触发跳转行为 —— IE6.0

5, 无form，只有1个input[type="text"]和1个input[type="button"]，同上，测试回车时是否触发button的click事件

测试结果： （1）为了避免4对5的影响，测试时将4中的submit按钮去掉，发现不能触发click事件完成跳转 —— IE6.0, Firefox, Chrome, Opera, Safari （2）在此页面测试，会触发4中的submit按钮跳转;

6, form中有2个以上input[type="text"]和1个button，同上，测试回车时浏览器行为

测试结果： （1）点击button按钮或回车，表单提交 —— Firefox, Chrome, Opera, Safari; （2）表单不提交 —— IE6.0;

7, 测试form中textarea和select等其他元素如何响应回车键

测试结果： （1）点击button按钮： Firefox, Chrome, Opera, Safari表单提交; IE6.0 表单不提交; （2）textarea中都能响应回车键; （3）选中radio, checkbox回车: Firefox响应并提交表单; Opera, IE6.0 响应回车键; Chrome, Safari不响应回车键; （4）选中select回车: IE6.0, Firefox, Chrome, Safari响应回车键; Opera 响应回车键并提交表单; （5）若Form中有submit按钮，测试回车时： select: 表现同上; radio, checkbox: IE6.0也能提交表单了;

总结

1、可以控制表单提交的事件是submit按钮的click事件，控制onclick事件可保证浏览器兼容性; 2、IE中对form的反应更“灵敏”,回车时会直接触发submit的onclick事件，JS无法阻止; 3、当只有一个input[type=text]，希望阻止回车时默认的submit行为（如采用ajax方式），可以在form中再添加1个input[type=text]，将其display:none便可。 4、以上测试环境为： IE6.0, Firefox 3.6, Opera 10, Chrome 6.0, Safari 5.0这5款浏览器;

By Wendy  文章来源：http://maomaoz.com/archives/118 附以上页面用到的JS：

标签:IE相关浏览器Form表单