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

所属分类: 网络编程 / JavaScript 阅读数: 232
收藏 0 赞 0 分享
条件是:
在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');//触发的事件,可自定义
}
更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多