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


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调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 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/05/14 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
PHP7 windows支持
2021/03/09 PHP
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
Python中的装饰器用法详解
2015/01/14 Python
Python实现二分查找算法实例
2015/05/26 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
python如何制作英文字典
2019/06/25 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
酒店人事专员岗位职责
2013/12/19 职场文书
供货协议书范本
2014/04/22 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
MySQL查询日期时间
2022/05/15 MySQL