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 相关文章推荐
对xmlHttp对象的理解
Jan 17 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
angular动态表单制作
Feb 23 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
vue使用video插件vue-video-player详解
Oct 23 Javascript
vue使用watch监听属性变化
Apr 30 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
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
理解javascript中的闭包
2017/01/11 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
使用js获取伪元素的content实例
2017/10/24 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
python3实现短网址和数字相互转换的方法
2015/04/28 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
Python: glob匹配文件的操作
2020/12/11 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
班主任经验交流会主持词
2014/04/01 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
Golang并发操作中常见的读写锁详析
2021/08/30 Golang