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


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的朋友一点学习经验小结
Nov 23 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
javascript实现des解密加密全过程
Apr 03 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 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生成0~1随机小数的方法(必看)
2017/04/05 PHP
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
深入理解Python中的*重复运算符
2017/10/28 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
python同时替换多个字符串方法示例
2019/09/17 Python
python求前n个阶乘的和实例
2020/04/02 Python
python打开音乐文件的实例方法
2020/07/21 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
财务方面个人工作的自我评价
2013/12/28 职场文书
蔬菜基地的创业计划书
2014/01/06 职场文书
留学推荐信中文范文三篇
2014/01/25 职场文书
市场营销专业自荐书
2014/06/10 职场文书
机械操作工岗位职责
2014/08/08 职场文书
发布会邀请函
2015/01/31 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
工作年限证明范本
2015/06/15 职场文书
奠基仪式致辞
2015/07/30 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android