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


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 相关文章推荐
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 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计数器的实现代码
2013/06/08 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
jquery ajax 登录验证实现代码
2009/09/23 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
分析JS中this引发的bug
2017/12/12 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
python赋值操作方法分享
2013/03/23 Python
python实现ping的方法
2015/07/06 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
Python 变量的创建过程详解
2019/09/02 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
增大python字体的方法步骤
2020/07/05 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
致跳远、跳高运动员广播稿
2014/01/09 职场文书
村委会主任先进事迹
2014/01/15 职场文书
安全大检查反思材料
2014/01/31 职场文书
党员创先争优公开承诺书
2014/03/28 职场文书
租赁协议书范本
2014/04/22 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
Python Django模型详解
2021/10/05 Python