不同浏览器对回车提交表单的处理办法
更新时间：2010年02月13日 09:59:33 作者：
在浏览器中填写表单的时，可以直接在“文本框”中敲击“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没有测试。
chrome在表单中敲回车键会触发提交表单
一个登录口在IE、firefox下敲回车后用js通过ajax验证成功后进行跳转，几个输入框写在了一个form中,当用户输入用户密码后触发ajax进行判断，此时IE和firefox都不会进行进行form的提交，且form中没有submit.而chorm和safari都会把此时input所有的form进行submit.
以后ajax的话，切记不要写在form当中.
2 这篇文章
chrome 浏览器上避免回车提交表单
之前在论坛上发过一贴,问:
"在chrome浏览器上
我改变回车按键或者让它无效也可以" 的问题,终无解
问题当时是为了避免回车提交表单引出的,现在这个问题到是解决了,其实很简单,只怪自己没想到
在Form的提交事件上动手脚:
onsubmit=“MySubmit();return false;"
MySubmit()可以用来做提交时的判断，如可一用另一个隐藏的表单完成自定义的提交任务。
这个问题有点菜，但的在chrome上改变回车事件却不好搞，有知情者还望告知。
3 参考以前的文章
同时在IE和FF获取KeyCode
以前一直在IE8中测试网站，后来写的一部分含有Ajax的代码出现了故障，不得已下载了Firefox以及它的插件Firebug，才发现，FF不支持windows.event事件。于是换了一种思路。
HTML
<input type="password" name="psw" id="loginpsw" onkeypress="submit1(event)"/>
Javascript
function submit1(e){
var isie = (document.all) ? true : false;//判断是IE内核还是Mozilla
var key;
if (isie)
key = window.event.keyCode;//IE使用windows.event事件
else
{
key = e.which;//3个按键函数有一个默认的隐藏变量，这里用e来传递。e.which给出一个索引值给Mo内核（注释1）
}
if(key==13)
send1('loginemail','loginpsw');//触发的事件，可自定义
}
在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没有测试。
复制代码 代码如下:
chrome在表单中敲回车键会触发提交表单
一个登录口在IE、firefox下敲回车后用js通过ajax验证成功后进行跳转，几个输入框写在了一个form中,当用户输入用户密码后触发ajax进行判断，此时IE和firefox都不会进行进行form的提交，且form中没有submit.而chorm和safari都会把此时input所有的form进行submit.
以后ajax的话，切记不要写在form当中.
2 这篇文章
复制代码 代码如下:
chrome 浏览器上避免回车提交表单
之前在论坛上发过一贴,问:
"在chrome浏览器上
我改变回车按键或者让它无效也可以" 的问题,终无解
问题当时是为了避免回车提交表单引出的,现在这个问题到是解决了,其实很简单,只怪自己没想到
在Form的提交事件上动手脚:
onsubmit=“MySubmit();return false;"
MySubmit()可以用来做提交时的判断，如可一用另一个隐藏的表单完成自定义的提交任务。
这个问题有点菜，但的在chrome上改变回车事件却不好搞，有知情者还望告知。
3 参考以前的文章
同时在IE和FF获取KeyCode
以前一直在IE8中测试网站，后来写的一部分含有Ajax的代码出现了故障，不得已下载了Firefox以及它的插件Firebug，才发现，FF不支持windows.event事件。于是换了一种思路。
HTML
<input type="password" name="psw" id="loginpsw" onkeypress="submit1(event)"/>
Javascript
复制代码 代码如下:
function submit1(e){
var isie = (document.all) ? true : false;//判断是IE内核还是Mozilla
var key;
if (isie)
key = window.event.keyCode;//IE使用windows.event事件
else
{
key = e.which;//3个按键函数有一个默认的隐藏变量，这里用e来传递。e.which给出一个索引值给Mo内核（注释1）
}
if(key==13)
send1('loginemail','loginpsw');//触发的事件，可自定义
}
相关文章
这篇文章主要介绍了JS Canvas接口和动画效果大全，对Canvas感兴趣的同学，可以参考下2021-04-04
2008-02-02
JavaScript使用shift方法移除素组第一个元素实例分析
这篇文章主要介绍了JavaScript使用shift方法移除素组第一个元素的用法,实例分析了javascript中shift方法的使用技巧,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了4个值得收藏的Javascript技巧，文章首先通过变量转字符串展开主题详情，需要的小伙伴可以参考一下2022-07-07
这篇文章主要为大家介绍了如何利用Three.js制作一个新闻联播开头动画，文中的实现步骤讲解详细，对我们学习有一定帮助，需要的可以参考一下2022-05-05
这篇文章主要介绍了javascript实现添加附件功能的方法，在我们编辑信息时，有时候需要附加文件、图片实现上传功能，通过本文了解javascript是如何实现附加功能的，请阅读。2015-11-11
这篇文章主要介绍了js简单遍历获取对象中的属性值的方法,涉及javascript使用for循环遍历json对象属性值的简单操作技巧,需要的朋友可以参考下2019-06-06
本文主要介绍了折叠菜单及选择器的运用。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要给大家介绍了关于js面试题之异步问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
JavaScript创建对象的方式有很多，通过Object构造函数或对象字面量的方式也可以创建单个对象，显然这两种方式会产生大量的重复代码，并不适合量产。接下来介绍七种非常经典的创建对象的方式，他们也各有优缺点2017-06-06
最新评论