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


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 相关文章推荐
JavaScript 打地鼠游戏代码说明
Oct 12 Javascript
使用jquery实现简单的ajax
Jul 08 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 Javascript
Swiper实现导航栏滚动效果
Oct 16 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 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实现禁用IE和火狐的缓存问题
2012/12/03 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
JQuery循环滚动图片代码
2011/12/08 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
python 19个值得学习的编程技巧
2020/08/15 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
副总经理任命书
2014/06/05 职场文书
银行求职自荐书
2014/06/25 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
一般纳税人申请报告
2015/05/18 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
python内置进制转换函数的操作
2021/06/02 Python