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


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 相关文章推荐
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
AngularJS Controller作用域
Jan 09 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
layui select 禁止点击的实现方法
Sep 05 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 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
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
js特殊字符过滤的示例代码
2014/03/05 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
python 写的一个爬虫程序源码
2016/02/28 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
Python3远程监控程序的实现方法
2019/07/15 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
出国留学经济担保书
2014/04/01 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
合作合同协议书范本
2015/01/27 职场文书
撤诉申请怎么写
2015/05/19 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js