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


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 相关文章推荐
JQuery实现自定义对话框的代码
Jun 15 Javascript
js tab效果的实现代码
Dec 26 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
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
ThinkPHP标签制作教程
2014/07/10 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python如何实现文本转语音
2016/08/08 Python
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
django中间键重定向实例方法
2019/11/10 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
升职自荐信
2013/11/28 职场文书
广告业务员岗位职责
2014/02/06 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android