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


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语法着色引擎(demo及打包文件下载)
Jun 13 Javascript
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
js+canvas实现纸牌游戏
Mar 16 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 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 DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
js代码实现微博导航栏
2015/07/30 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
PHP中cookie知识点学习
2018/05/06 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
vue router demo详解
2017/10/13 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
python计算书页码的统计数字问题实例
2014/09/26 Python
python从入门到精通(DAY 2)
2015/12/20 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
一套C++笔试题面试题
2012/06/06 面试题
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
财政局长自荐信范文
2013/12/22 职场文书
设计师求职信
2014/07/01 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书