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


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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
js查找节点的方法小结
Jan 13 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
详解angular element()方法使用
Apr 08 Javascript
js实现倒计时关键代码
May 05 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 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
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
深入探讨PHP中的内存管理问题
2011/08/31 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
php三元运算符知识汇总
2015/07/02 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
银行门卫岗位职责
2013/12/29 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
旅游节目策划方案
2014/05/26 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
电视新闻稿
2015/07/17 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android