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


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 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
javascript时间差插件分享
Jul 18 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
ztree实现权限横向显示功能
May 20 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
JavaScript流程控制(循环)
Dec 06 Javascript
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
PHP7.0版本备注
2015/07/23 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
python单线程实现多个定时器示例
2014/03/30 Python
Python抓取百度查询结果的方法
2015/07/08 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python3.5运算符操作实例详解
2019/04/25 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
如何定义TensorFlow输入节点
2020/01/23 Python
python绘制玫瑰的实现代码
2020/03/02 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
计算机网络专业推荐信
2013/11/24 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
服装发布会策划方案
2014/05/22 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
朋友离别感言
2015/08/04 职场文书
pytorch 实现变分自动编码器的操作
2021/05/24 Python