不同浏览器对回车提交表单的处理办法(转载)
不同浏览器对回车提交表单的处理办法(转载)
对下面的一段代码,刚开始使用 onClick 事件,在 IE 6.0 中,要按“提交”按扭才起做用,直接回车不行,而在 firefox 3.6 中回车和按“提交”按扭都可以。
之后在转载的这篇文章中看到一些说明,大概是如果要控制提交行为,可以在 type="submit" 加 onClick 事件,但是对一些浏览器得有一个事件触发器才能用回车键提交表单,这就是遇到的问题。还有一种方法就是用<form>的“onsubmit”属性,对它回车键或按“提交”按扭都会触发提交表单,如果没有特别的事件,那用“onsubmit”属性似乎更方便一点。
下面是测试代码
------------------------------------------
<html><head><title>购物</title>
<script type="text/javascript">
function p(){
document.form.addr.value=escape(document.form.addr.value);
document.form.submit();
}
</script>
</head>
<body οnlοad="document.getElementById('address_box').focus()">
<form name="form" method="post" action="./url.php" οnsubmit="p();">
超市地址 <input id="address_box" type="text" name="addr" value="家乐福超市" size="30" οnfοcus="this.select()" />
<input id="go" type="submit" value="提交"/><br />
购买一 : <input type="checkbox" name="hl[shop_one]" />鸡蛋<br />
购买二 : <input type="checkbox" name="hl[shop_two]" />鲜花<br />
</form>
</body></html>
------------------------------------------
这段是转载
不同浏览器对回车提交表单的处理办法(转载)
在IE和Firefox下
1、<form>属性的“action”字段必填;
2、有一个type="submit"的“input”。
在Chrome和Safari下
满足第一条即可。(注释1)
如果要控制提交行为的话(比如,提交前检查必填项是否已填),可以在type="submit"的“input”后添加 Javascript“onXXX(比如onClick)”事件。而如果需要用异步交互来检测相关字段,则无效了。因为return false是作为onreadystate=的子函数,并不能控制全局。这时就需要用到<form>的“onsubmit”属性。 (注释2)
比如:
<form name="form1" id="form1" action="act.php" method="post" οnsubmit="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的提交事件上动手脚:
οnsubmit=“MySubmit();return false;" MySubmit()可以用来做提交时的判断,如可一用另一个隐藏的表单完成自定义的提交任务。
这个问题有点菜,但的在chrome上改变回车事件却不好搞,有知情者还望告知。
3、同时在IE和FF获取KeyCode
以前一直在IE8中测试网站,后来写的一部分含有Ajax的代码出现了故障,不得已下载了Firefox以及它的插件Firebug,才发现,FF不支持windows.event事件。于是换了一种思路。
<input type="password" name="psw" id="loginpsw" οnkeypress="submit1(event)"/>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');//触发的事件,可自定义}
原文链接:http://www.codesky.net/article/doc/201004/20100417043901.htm
转载于:https://www.cnblogs.com/yisuo/p/9246950.html
不同浏览器对回车提交表单的处理办法(转载)相关推荐
- jq html 回车提交表单,jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
键盘事件处理所有用户在键盘敲击的情况,不管在文本输入区域内部还是外部.键盘事件在不同的浏览器中作用的范围是不一样的,通常这种键盘事件可以作用于 Form元素,a标签元素,window ,documen ...
- html 禁用回车提交,HTML防止input回车提交表单
原链接:https://blog.csdn.net/ligang2585116/article/details/44699567 自动提交情况说明: 1.默认情况下,单个输入框,无论按钮的type=& ...
- 表单元素聚焦状态回车提交表单问题小记
表单元素聚焦状态回车自动提交表单问题 情景 多个表单元素且有个button的type没有写,或者写了type=submit; 当表单只有一个元素 方案 问题1: 将button 加上type=butt ...
- HTML防止input回车提交表单
最近在做一个小需求时,发现了一个问题:当form表单中,存在一个button,在input中按回车会自动触发form提交,很是郁闷,经过查询资料,特总结如下: 自动提交情况说明: 默认情况下,单个输入 ...
- IE浏览器通过JS提交表单时报错拒绝访问
form表单填写完毕后,点击提交没反应,无法保存,通过F12查看原来是script拒绝访问 我用的是document.stuForm.submit();方法 原来是文中包含图片上上传,而我文件上传用到 ...
- jquery输入框按下回车提交表单
jQuery on()方法是官方推荐的绑定事件的一个方法 $('#password').on('keydown', function(e) {// 短路语法,当e.keyCode == 13成立的时候 ...
- html form提交前md5,javascript实现MD5加密-JavaScript获取HTML元素的三种方...-兼容IE与firefox的js回车提交表单_169IT.COM...
本文介绍JavaScript获取网页中HTML元素的三种方法,供大家学习参考. 1.getElementById() getElementById()可以访问DOCUMENT中的某一特定元素,顾名思义 ...
- JS--JavaScript提交表单(submit事件)、重置表单、取消默认提交表单(单击按钮、回车)
提交表单 使用< input > 或 < button >标签都可以定义提交按钮,只要将type属性值设置为"submit"即可,而图像按钮则是通过将 &l ...
- Form表单 回车(Enter)提交表单问题
Form表单 回车(Enter)提交表单问题 在Form表单中input会自动响应回车事件.这是表单的默认提交动作. 表单的提交行为,可以用两种方式定义,一是form表单自身,二是form表单的but ...
最新文章
- 自学笔记——2.字符串的切片、遍历、查找字符
- 零基础学前端开发技术之第七章 浮动塌陷
- /home/appleyuchi主目录迁移到新磁盘中
- Codeforces 786B Legacy (线段树优化建图)
- 人工智能常用 API
- LeetCode 第 20 场双周赛(294 / 1541,前19.07%,第1次全部通过)
- java性能优化方案_Java性能优化要点
- String与StringBuffer和StringBuilder的根本区别
- java 定义构造器_java的构造器定义以及使用
- 软件设计师2004年5月下午试题6(C++ 数组下标检测)
- unity中的透视投影矩阵
- 小区选择与重选的方法理解
- 4、【办公自动化】Python实现Word转PDF
- 20135202闫佳歆——家庭作业汇总
- 6.1色彩的概念和对比和调和
- C中 stdarg.h
- Elasticsearch:如何制作 GeoJSON 文件并进行地理位置搜索
- 人民币金额由阿拉伯数值转换成汉字大写数值的函数
- 【Linux】僵尸进程(Z状态)和孤儿进程
- Saruman‘s Army
热门文章
- Dubbo 注册中心 之 Zookeeper
- python3openpyxl,python3和openpyxl,在写入fi时格式化日期列表
- 从源码分析RocketMQ系列-Remoting通信架构源码详解
- mysql里的各种锁
- java校验入参的有效性的工具类
- 崛起于Springboot2.X之Mongodb多数据源处理(35)
- 字符串拷贝记得strcpy
- [CTO札记]Google数字图书馆对中国版权的威胁
- [Python爬虫] 之十八:Selenium +phantomjs 利用 pyquery抓取电视之家网数据
- Scala构建工具SBT