form表单提交与input相关问题


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行为:
      按回车,不自动提交表单 —— IE,FF, Chrome, Opera, Safari;

 

    * 只阻止btn.onclick行为:

      按回车,不自动提交表单 —— IE,FF, Chrome, Opera, Safari;
      按回车,自动提交表单 —— IE6;    

 

    * 只阻止form.submit行为: 不自动提交表单 —— IE,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事件

    * 测试结果: 发现不能触发click事件完成跳转 —— IE6, FF, Chrome, Opera, Safari


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

    * 在此页面测试,会触发4中的submit按钮;

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

    * 测试结果: 点击button按钮或回车,表单不提交 —— FF, Chrome, Opera, Safari;
    * 表单不提交 —— IE6;


总结

   1. 可以控制表单提交的事件是onsubmit事件,控制onsubmit事件可保证浏览器兼容性;
   2. IE中对form的反应不“灵敏”,回车时不会直接触发submit的onclick事件,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;

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值