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

作者：不详点击：593次评论：1次标签：浏览器

07073游戏浏览器v2.0.1.6 官方正式版

类型：浏览器类大小：3.7M语言：中文评分：6.4
标签：

立即下载

　　在浏览器中填写表单的时，可以直接在“文本框”中敲击“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

1 <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没有测试。参考了这篇文章