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


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 相关文章推荐
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
vue实现购物车选择功能
Jan 10 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 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
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
杏林同学录(三)
2006/10/09 PHP
用PHP读取flv文件的播放时间长度
2009/09/03 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
jQuery Plupload上传插件的使用
2017/04/19 jQuery
js中url对象化管理分析
2017/12/29 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
python requests.get带header
2020/05/05 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
学校安全责任书范本
2014/07/23 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
群众路线表态发言材料
2014/10/17 职场文书
青年教师个人总结
2015/02/11 职场文书
妇产科护理心得体会
2016/01/22 职场文书
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL