JavaScript阻止回车提交表单的方法


Posted in Javascript onDecember 30, 2015

大家对回车键的功能应该比较熟悉,比如在windows系统的很多应用程序中,只要点击回车键就可以进入此程序或者开启某项功能,不过有时候我们希望阻止它的功能,例如在填写表单的时候,可能不小心点击回车键造成表单误提交,下面就来简单介绍一下如何实现此功能。代码实例如下:

如何防止回车(enter)键提交表单,其实很简单,就一句话。onkeydown="if(event.keyCode==13)return false;"把这句写在from标签里面就好了。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<title>屏蔽回车提交表单功能</title>
<script type="text/javascript">
window.onload=function()
{
 var myform=document.getElementById("myform");
 myform.onkeypress=function(ev)
 {
  var ev=window.event||ev;
  if(ev.keyCode==13||ev.which==13)
  {
    return false;
   }
 }
}
</script>
</head>
<body>
<p>在表单中回车默认会提交表单,在form的onkeypress事件中处理,只要返回false就可禁用回车提交表单</p>
<form id="myform">
<input type="text" name="username"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>

以上代码可以屏蔽点击回车提交表单的功能。代码简单易懂,有不明白的欢迎提出宝贵意见,谢谢大家一直以来对三水点靠木网站的支持。

Javascript 相关文章推荐
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
微信小程序实现圆形进度条动画
Nov 18 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
OpenLayer学习之自定义测量控件
Sep 28 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 #Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 #Javascript
JavaScript小技巧整理
Dec 30 #Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 #Javascript
jQuery给元素添加样式的方法详解
Dec 30 #Javascript
Underscore源码分析
Dec 30 #Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 #Javascript
You might like
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
Javascript window对象详解
2014/11/12 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
匡威英国官网:Converse英国
2018/12/02 全球购物
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
.NET常见笔试题集
2012/12/01 面试题
大学活动策划书范文
2014/01/10 职场文书
房地产项目策划书
2014/02/05 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
Apache自带的ab压力测试工具的实现
2022/07/23 Servers