Form表单动作在不同浏览器下的反应
最近在做项目的时候遇到个form在IE6.0浏览器下,按回车自动提交的问题,就因为只有1个type=text,按回车键就自动提交了,用js脚本都无法控制。在网上找到一些相关信息后,突然很有兴趣对各个浏览器下的form反应做一个测试。于是通过这篇文章把不同浏览器下的form反应都记录下来。以下是一些测试结果,通过这个测试页面,可以了解的更清楚一点。
1 form中只有1个input
测试结果:
javascript阻止form.submit行为,按回车,自动提交表单;
2 form中有1个input和1个input
测试结果:
(1)javascript阻止form.submit和btn.onclick行为:
按回车,不自动提交表单 —— Firefox, Chrome, Opera, Safari;
按回车,自动提交表单 —— IE6.0;
(2)只阻止btn.onclick行为: 效果同上;
(3)只阻止form.submit行为: 均提交表单;
3, form中有2个以上input和1个input
测试结果:
(1)javascript阻止form.submit和btn.onclick行为:
按回车,不能提交表单 — IE6.0, Firefox, Chrome, Opera, Safari
(2)只阻止btn.onclick行为: 效果同上;
(3)只阻止form.submit行为: 均提交表单;
4, 无form,只有1个input和1个input,用javascript控制跳转,测试回车是否触发click事件
测试结果:
按回车,不触发跳转行为 —— Firefox, Chrome, Opera, Safari
按回车,触发跳转行为 —— IE6.0
5, 无form,只有1个input和1个input,同上,测试回车时是否触发button的click事件
测试结果:
(1)为了避免4对5的影响,测试时将4中的submit按钮去掉,发现不能触发click事件完成跳转 —— IE6.0, Firefox, Chrome, Opera, Safari
(2)在此页面测试,会触发4中的submit按钮跳转;
6, form中有2个以上input和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,希望阻止回车时默认的submit行为(如采用ajax方式),可以在form中再添加1个input,将其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>
没看完~~~~~~ 先顶,好同志
static/image/common/sigline.gif
http://img2081.poco.cn/mypoco/myphoto/20110822/16/64165363201108221627279573116820626_004.jpg 嘿嘿~奸笑中!
static/image/common/sigline.gif
www.byelu.com 办理真实毕业证www.hanwensports.com 买大专文凭 好,值得细看,佩服
static/image/common/sigline.gif
今日新开征途私服 惊天动地私服网 劲舞团私服登陆器 劲舞团私服下载 华夏天堂私服 天龙八部私服怎么玩 网通天堂2私服 qq天龙八部私服
劲舞团私服520 非常谢谢楼主,顶一下
static/image/common/sigline.gif
北投奇迹新闻 泌阳冒险岛外挂 澜沧热血江湖sf 屏南魔力宝贝一条龙 永年惊天动地GM 宁河1.76复古传奇 民权魔兽世界一条龙
页:
[1]