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 相关文章推荐
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
JavaScript和ActionScript的交互实现代码
Aug 01 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
JSON相关知识汇总
Jul 03 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
基于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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
PHP的拦截器实例分析
2014/11/03 PHP
Yii2如何批量添加数据
2016/05/17 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
用javascript操作xml
2006/11/04 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
微信小程序入门教程
2016/11/18 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
深入理解vue Render函数
2017/07/19 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
Python 查看文件的读写权限方法
2018/01/23 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
Mac安装python3的方法步骤
2019/08/09 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
python实现按日期归档文件
2021/01/30 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
通用求职信范文模板分享
2013/12/27 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
酒店管理求职信范文
2014/04/06 职场文书
大学班级文化建设方案
2014/05/06 职场文书
家长给学校的建议书
2014/05/15 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis