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


Posted in Javascript onFebruary 13, 2010

条件是:
在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');//触发的事件,可自定义 
}
Javascript 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
JavaScript 题型问答有答案参考
Feb 17 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
C++中的string类的用法小结
Aug 07 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
Javascript实现信息滚动效果
May 18 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
Jquery iframe内部出滚动条
Feb 11 #Javascript
jquery 问答知识整理
Feb 11 #Javascript
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 #Javascript
jQuery 改变CSS样式基础代码
Feb 11 #Javascript
jQuery 添加/移除CSS类实现代码
Feb 11 #Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 #Javascript
JavaScript 输入框内容格式验证代码
Feb 11 #Javascript
You might like
多文件上载系统完整版
2006/10/09 PHP
搜索引擎技术核心揭密
2006/10/09 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
jquery ui resizable bug解决方法
2010/10/26 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
详解python的argpare和click模块小结
2019/03/31 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
台湾森森购物网:U-mall
2017/10/16 全球购物
表达自我的市场:Society6
2018/08/01 全球购物
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
三年级数学教学反思
2014/01/31 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
2014庆六一活动方案
2014/03/02 职场文书
和谐社区口号
2014/06/19 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang