就爱编程论坛

标题: Form表单动作在不同浏览器下的反应 [打印本页]

---

作者: admin    时间: 2011-7-12 20:26:02     标题: Form表单动作在不同浏览器下的反应

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

以下是一些测试结果，通过这个测试页面，可以了解的更清楚一点。
1  form中只有1个input[type="submit"][attach]722[/attach]
测试结果：
javascript阻止form.submit行为，按回车，自动提交表单;
2  form中有1个input[type="text"]和1个input[type="submit"][attach]723[/attach]
测试结果：
（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"][attach]724[/attach]
测试结果：
（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事件[attach]725[/attach]
测试结果：
按回车，不触发跳转行为 —— Firefox, Chrome, Opera, Safari
按回车，触发跳转行为 —— IE6.0
5, 无form，只有1个input[type="text"]和1个input[type="button"]，同上，测试回车时是否触发button的click事件[attach]726[/attach]
测试结果：
（1）为了避免4对5的影响，测试时将4中的submit按钮去掉，发现不能触发click事件完成跳转 —— IE6.0, Firefox, Chrome, Opera, Safari
（2）在此页面测试，会触发4中的submit按钮跳转;
6, form中有2个以上input[type="text"]和1个button，同上，测试回车时浏览器行为[attach]727[/attach]
测试结果：
（1）点击button按钮或回车，表单提交 —— Firefox, Chrome, Opera, Safari;
（2）表单不提交 —— IE6.0;
7, 测试form中textarea和select等其他元素如何响应回车键[attach]728[/attach]
测试结果：
（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.submit = stopDefault;
}
/**
* 阻止btn按钮click事件
*
*/
var btns = document.getElementsByName(”btn”);
for ( var i = 0; i < btns.length; i++) {
btns.onclick = stopDefault;
}
/**
* 控制无from的btn按钮click事件
* 完成页面跳转
*
*/
var nofrm_btns = document.getElementsByName(”nofrm_btn”);
for ( var i = 0; i < nofrm_btns.length; i++) {
nofrm_btns.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>

---

作者: 多晴酷夏    时间: 2011-9-6 19:09:13

没看完~~~~~~ 先顶，好同志

---

作者: iargl    时间: 2011-9-7 12:00:04

嘿嘿~奸笑中!












www.byelu.com  办理真实毕业证www.hanwensports.com 买大专文凭

---

作者: ABC_84    时间: 2011-10-7 03:18:14

好，值得细看，佩服












今日新开征途私服 惊天动地私服网 劲舞团私服登陆器 劲舞团私服下载 华夏天堂私服 天龙八部私服怎么玩 网通天堂2私服 qq天龙八部私服
劲舞团私服520

---

作者: 侃呀侃之灵    时间: 2011-10-9 09:14:58

非常谢谢楼主，顶一下












北投奇迹新闻 泌阳冒险岛外挂 澜沧热血江湖sf 屏南魔力宝贝一条龙 永年惊天动地GM 宁河1.76复古传奇 民权魔兽世界一条龙

---

欢迎光临 就爱编程论坛 (http://bbs.waibc.com/)

Powered by Discuz! X2