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：

<script type="text/javascript">

/**

* 阻止Form表单提交事件

*

*/

var forms = document.getElementsByTagName("form");

for ( var i = 0; i < forms.length; i++) {

//forms[i].submit = stopDefault;

}

/**

* 阻止btn按钮click事件

*

*/

var btns = document.getElementsByName("btn");

for ( var i = 0; i < btns.length; i++) {

btns[i].onclick = stopDefault;

}

/**

* 控制无from的btn按钮click事件

* 完成页面跳转

*

*/

var nofrm_btns = document.getElementsByName("nofrm_btn");

for ( var i = 0; i < nofrm_btns.length; i++) {

nofrm_btns[i].onclick = redirectUrl;

}

function redirectUrl() {

window.location.href = "submit4.html";

}

/**

* 阻止浏览器的默认行为

*

* @public

* @param <event>

*            浏览器事件

*/

function stopDefault(e) {

if (e && e.preventDefault) {

e.preventDefault();

} else {

window.event.returnValue = false;

}

return false;

}

</script>