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


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 常用操作整理 基础入门篇
Oct 14 Javascript
巧用局部变量提升javascript性能
Feb 24 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
js实现无缝轮播图效果
Mar 09 Javascript
Vue Render函数创建DOM节点代码实例
Jul 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下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
PHP-MySQL教程归纳总结
2008/06/07 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
一段实用的php验证码函数
2016/05/19 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
python实现数据写入excel表格
2018/03/25 Python
python实现二维数组的对角线遍历
2019/03/02 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
学生会个人自荐书范文
2014/02/12 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
技术合作协议书范本
2014/04/18 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书