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修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
Ajax是什么?Ajax高级用法之Axios技术
Apr 21 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
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
layui实现数据分页功能
2019/07/27 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
python对json的相关操作实例详解
2017/01/04 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
函授本科自我鉴定
2013/11/03 职场文书
草船借箭教学反思
2014/02/03 职场文书
简历的自我评价范文
2014/02/04 职场文书
超市促销活动方案
2014/03/05 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
学习雷锋倡议书
2014/04/15 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
质量月口号
2014/06/20 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
TensorFlow的自动求导原理分析
2021/05/26 Python