1, form中只有1个input[type="submit"],测试回车是否自动提交
* 测试结果: javascript阻止form.submit行为,按回车,自动提交表单 --- 测试浏览器:IE6, FF, Chrome, Opera, Safari;
2, form中有1个input[type="text"]和1个input[type="submit"],测试回车是否自动提交
* 测试结果: javascript阻止form.submit和btn.onclick行为:
按回车,不自动提交表单 —— FF, Chrome, Opera, Safari;
按回车,自动提交表单 —— IE6;
* 只阻止btn.onclick行为: 效果同上;
* 只阻止form.submit行为: 均提交表单 —— IE6, FF, Chrome, Opera, Safari
3, form中有2个以上input[type="text"]和1个input[type="submit"]
* 测试结果: javascript阻止form.submit和btn.onclick行为:
按回车,不能提交表单 --- IE6, FF, Chrome, Opera, Safari
* 只阻止btn.onclick行为: 效果同上;
* 只阻止form.submit行为: 均提交表单 —— IE6, FF, Chrome, Opera, Safari
4, 无form,只有1个input[type="text"]和1个input[type="submit"],用javascript控制跳转,测试回车是否触发事件
* 测试结果: 按回车,不触发跳转行为 —— FF, Chrome, Opera, Safari
按回车,触发跳转行为 —— IE6
5, 无form,只有1个input[type="text"]和1个input[type="button"],同上,测试回车时是否触发button的click事件
* 测试结果: 为了避免4对5的影响,测试时将4中的submit按钮去掉,发现不能触发click事件完成跳转 —— IE6, FF, Chrome, Opera, Safari
* 在此页面测试,会触发4中的submit按钮跳转;
6, form中有2个以上input[type="text"]和1个button,同上,测试回车时浏览器行为
button
* 测试结果: 点击button按钮或回车,表单提交 —— FF, Chrome, Opera, Safari;
* 表单不提交 —— IE6;
7, 测试form中textarea和select是否响应回车键
测试radio是否响应回车键1 测试radio是否响应回车键2
测试check是否响应回车键1 测试check是否响应回车键2
button
* 测试结果: 点击button按钮: FF, Chrome, Opera, Safari表单提交; IE6 表单不提交;
* textarea中都能响应回车键;
* 选中radio, checkbox回车: FF响应并提交表单; Opera, IE6 响应回车键; Chrome, Safari不响应回车键;
* 选中select回车: IE6, FF, Chrome, Safari响应回车键; Opera 响应回车键并提交表单;
* 若Form中有submit按钮,测试回车时:
select: 表现同上;
radio, checkbox: IE6也能提交表单了;
总结
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 原版, Firefox 3.6, Opera 10, Chrome 6.0, Safari 5.0;
各浏览器的表单提交
最新推荐文章于 2024-06-21 19:36:24 发布