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


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 相关文章推荐
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
php 获得汉字拼音首字母的函数
2009/08/01 PHP
PHP实现的购物车类实例
2015/06/17 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
详解python调度框架APScheduler使用
2017/03/28 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
基于Python List的赋值方法
2018/06/23 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
生产车间实习自我鉴定
2013/09/23 职场文书
大学生求职自荐信
2013/12/12 职场文书
大学自我评价
2014/02/12 职场文书
大学四年个人自我小结
2014/03/05 职场文书
奥林匹克的口号
2014/06/13 职场文书
安全施工责任书
2014/08/25 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang