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代码示例(重构前后对比)
Jan 23 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
javascript实现数独解法
Mar 14 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
详解Js中的模块化是如何实现的
Oct 18 Javascript
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
详解React路由传参方法汇总记录
Nov 29 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
PHP 日期加减的类,很不错
2009/10/10 PHP
PHP图片验证码制作实现分享(全)
2012/05/10 PHP
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
python基础教程之Hello World!
2014/08/29 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
python实现数据库跨服务器迁移
2018/04/12 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
Python----数据预处理代码实例
2019/03/20 Python
django连接oracle时setting 配置方法
2019/08/29 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
七夕相亲活动策划方案
2014/08/31 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
公司放假通知怎么写
2015/04/15 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python