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


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 相关文章推荐
捕获关闭窗口的脚本
Jan 10 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
Javascript 闭包引起的IE内存泄露分析
May 23 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
详解JavaScript树结构
Jan 09 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 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快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
javascript之学会吝啬 精简代码
2010/04/25 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
javascript页面倒计时实例
2015/07/25 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
在类Unix系统上开始Python3编程入门
2015/08/20 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
师德学习感言
2014/01/31 职场文书
升学宴演讲稿
2014/09/01 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
5.12护士节活动总结
2015/02/10 职场文书
活动主持人开场白
2015/05/28 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python