禁止按回车键提交表单的方法


Posted in Javascript onJune 11, 2015

出现自动提交的情况,有两种可能:

一是编写了javascript代码,当用户点按Enter键时,通过js事件侦听机制触发表单的提交。

二是利用了浏览器的默认行为(至少发现ie是这样的)。浏览器在解析网页的时候,有许多默认的行为,例如如果一个页面上有表单和一个提交按钮,那么打开页面时,焦点会自动落在这个提交按钮上面。同样如果一个表单中只有一个单行文本输入域(text),那么在这个输入域中按Enter键时,浏览器会自动提交该表单。

我们对于第一种情况一般都知道而且很容易理解,但是对于第二种浏览器的默认行为,可能知道这一点的人就比较少了,下面我具体看一下浏览器(至少ie如此)在表单提交上的默认行为。

如果表单中含有一个单行文本输入域,那么无论含有多少其他类型的表单组件,那么在该输入域中点击Enter时,表单会自动提交。

例如下面的代码:

<form action="" method="post">
<input type="text" name="sdfsdf"/>
<input type="checkbox">sdfsdf
<input type="hidden"name="aa"/></form>

如果表单中含有两个或多个单行文本输入域,那么无论是否含有其他类型的表单组件,按Enter键时不会自动提交,例如:

<form action="" method="post"
<input type="text"
name="sdfsdf"/
<input type="text"
name="sddf"/</form

办法很简单,我们上面举的例子中已经有了,只要再添加一个文本输入框就可以了,可能你会说,为了不自动提交就要增加一个没有用的输入框,而且中含有两个输入框最终用户会接受吗?其实可以解决,你可以将那个新添加的输入框通过style隐藏即可,例如:

<form action="" method="post"
<input type="text" name="notautosubmit"
style="display:none"/
<input type="text"
name="username"/</form

还有一个方法可以绑定button按钮 enter触发事件:
document.onkeypress = function(){
if(event.keyCode == 13) {search();returnfalse;}}其中search方法是onclick事件:<form name="searchfrom"

最终解决方案:

<script language="javascript"> 
  function defineSubmit(btn) 
  { 
    if("submit1" == btn.value) 
    { 
      document.testForm.action="firstAction"; 
    } 
    else 
    { 
      document.testForm.action="secondAction"; 
    } 
     
    document.testForm.submit(); 
  } 
</script> 
<form name="testForm" method="post"> 
    username:<input type="text" name="username"/> 
    password:<input type="password" name="password"/> 
    <input type="button" name="submitName" onclick="defineSubmit(this)" value="submit1"/> 
    <input type="button" name="submitName" onclick="defineSubmit(this)" value="submit2"/> 
</form>
Javascript 相关文章推荐
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
javascript new 需不需要继续使用
Jul 02 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
浅析Ajax语法
Dec 05 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
js中this对象用法分析
Jan 05 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 #Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 #Javascript
JS/Jquery判断对象为空的方法
Jun 11 #Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 #Javascript
无刷新上传文件并返回自定义值
Jun 11 #Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 #Javascript
JS制作手机端自适应缩放显示
Jun 11 #Javascript
You might like
最令PHP初学者头痛的十四个问题
2006/07/12 PHP
php 获取客户端的真实ip
2009/11/30 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
PHP时间处理类操作示例
2018/09/05 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
javascript自执行函数
2017/02/10 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
python虚拟环境virtualenv的使用教程
2017/10/20 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
高三自我鉴定怎么写
2013/10/19 职场文书
护士自我鉴定怎么写
2014/02/07 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
语文教师个人工作总结
2015/02/06 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
Python合并多张图片成PDF
2021/06/09 Python
SQL Server中的游标介绍
2022/05/20 SQL Server