手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜Qcloud , 注册 | 登陆

不同浏览器对回车提交表单的处理办法

首页 > PHP >

不知道你是否注意过,在firefox或者Chrome下面,即使没有定义input type=submit,只要点击任何一个button,都能触发form 的submit事件,这是为什么呢?
看看这篇文章吧,介绍的有点详细,把它留下来是因为我一向属于知其然不知其所以然,只知道问题所在,和如何解决,从来不深究它的内涵,这也是我为什么水平上不去的原因。。。所以,不要学我,还是看完这篇文章吧。。。虽然不一定详细,但毕竟知其一部分所以然了。

原文来自:不同浏 览器对回车提交表单的处理办法
内容如下:

  在浏览器中填写表单的时,可以直接在“文本框”中敲击“Enter”来提交表单,很是方便。条件是:

  • 在IE和Firefox下

1、<form>属性的“action”字段必填;

2、有一个type="submit"的“input”。

  • 在Chrome和Safari下 满足第一条即可。(注释1)

  所以,如果要控制提交行为的话(比如,提交前检查必填项是否已填),可以在type="submit"的“input”后添加 Javascript“onXXX(比如onClick)”事件。而如果需要用异步交互来检测相关字段,则无效了。因为return false是作为onreadystate=的子函数,并不能控制全局。这时就需要用到<form>的 “onsubmit”属性(注释2)。比如:

HTML

<form name="form1" id="form1" action="act.php" method="post" onsubmit="myfn();return false;">
  •  myfn()是自己定义的函数:无论通过什么办法 (比如敲击“enter”或点击type="submit"(而不是type="button")的“input”按钮)提交,都会触发这个这个函数。于 是,大可不必再在type="submit"的“input”后添加Javascript事件“onXXX”了。直接在“onsubmit”中控制,更直 观与统一,除非有意控制提交方式(是onClick还是什么)。
  • return false位于末尾,表示不提交本表单。提交表单的字句document.form1.submit()可以作为myfn()的一个选择条件的分支。

总结:

  这样,<form>有“action”和“onsubmit”属性,有type="submit"的“input”的提交按钮后, 就可以在任何浏览器下(不行吗?请给我反馈)实现使用“Enter”键和鼠标都可以对表单的相关字段进行异步(Ajax)和同步(单纯的 Javascript)检查并予以提交。

其他:

1、如果使用type="button"来异步检测相关字段呢?

  这样,这个“input”必须得有一个事件触发器。在IE和FF下,无法直接在文本框中按下“Enter”来提交表单。如果要的话,需要使用额 外的函数来监听用户按下了什么,给出一个怎样的反映(注释3)。更糟糕的是,在Ch和Sa下,会忽略是否有type="submit"按钮,而直接根据 “action”属性来提交表单,如此以来,便无法实现预期的检测,可能还有更麻烦的后果。

2、如果不写“action”属性,直接异步提交表单呢?

  这样,通过异步的方式提交表单,而不仅仅是检测,这个属性则没有必要。而且还是多余。假如这样能提供更好的用户体验,何乐而不为呢?呵呵。

【参考】

1 在IE8,FF,Ch中测试有效。Opera和Sa没有测试。参考了这篇文章(http://tieba.baidu.com/f?kz=669494938

2 这篇文章(http://blog.csdn.net/xiewhenwe/archive/2009/11/08/4785469.aspx) 给了我借鉴

3 参考我以前的文章(http://www.cnblogs.com/lamper/archive/2010/02/06/1665117.html

 




本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

Tags: form, firefox, chrome, ie, submit

« 上一篇 | 下一篇 »

只显示10条记录相关文章

表单提交时submit按钮的值没有被提交 (浏览: 54767, 评论: 5)
[转载]超强大的jquery formValidator (浏览: 39904, 评论: 3)
mac 下 ssh -d 翻墙 (浏览: 32917, 评论: 0)
通过JS更改FORM的action (浏览: 25953, 评论: 1)
身为WEB开发人员,真是痛苦,ietester解决部分痛苦 (浏览: 18413, 评论: 5)
修复:使用chrome在Sablog里面发博文 (浏览: 17878, 评论: 4)
推荐一款插件:ScribeFire (浏览: 17327, 评论: 4)
又是swfupload惹的祸 (浏览: 16920, 评论: 0)
表单提交按钮input和button的取舍 (浏览: 16434, 评论: 0)
看上去不错:Chrome 扩展 Monster (浏览: 15383, 评论: 2)

发表评论

评论内容 (必填):