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 相关文章推荐
json 入门基础教程 推荐
Oct 31 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
关于js datetime的那点事
Nov 15 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 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 function用法如何递归及return和echo区别
2014/03/07 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
详细分析单线程JS执行问题
2017/11/22 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
python 连续不等式语法糖实例
2020/04/15 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
德国足球商店:OUTFITTER
2019/05/06 全球购物
StringBuilder和String的区别
2015/05/18 面试题
学前班教师的自我鉴定
2013/12/05 职场文书
养殖行业的创业计划书
2014/01/05 职场文书
安全协议书范本
2014/04/21 职场文书
小学三年级学生评语
2014/04/22 职场文书
部门2014年度工作总结
2014/11/12 职场文书
工作经历证明范本
2015/06/15 职场文书
运动会宣传稿50字
2015/07/23 职场文书
感恩教师节主题班会
2015/08/12 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python