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


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 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
js实现点击选项置顶动画效果
Aug 25 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
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自定义错误处理用法实例
2015/03/20 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
详解AngularJS 模块化
2017/06/14 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
python爬虫之遍历单个域名
2019/11/20 Python
什么是python的自省
2020/06/21 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
Python里面search()和match()的区别
2016/09/21 面试题
幼儿园端午节活动方案
2014/08/25 职场文书
员工工作能力评语
2014/12/31 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
婚宴主持词
2015/06/30 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
Python中super().__init__()测试以及理解
2021/12/06 Python