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 相关文章推荐
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
react的hooks的用法详解
Oct 12 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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
php身份证号码检查类实例
2015/06/18 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
详解Python中的正则表达式的用法
2015/04/09 Python
pandas多级分组实现排序的方法
2018/04/20 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
django之自定义软删除Model的方法
2019/08/14 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
食品流通安全承诺书
2014/05/22 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL