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 相关文章推荐
Javascript this指针
Jul 30 Javascript
用JS写的一个TableView控件代码
Jan 23 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
Aug 02 Javascript
原生javascript获取元素样式
Dec 31 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 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中的登陆login
2007/01/18 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
市政施工员自我鉴定
2014/01/15 职场文书
英文商务邀请信
2014/01/22 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
搞笑征婚广告词
2014/03/17 职场文书
红头文件任命书范本
2014/06/05 职场文书
小学四年级学生评语
2014/12/26 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
2015年市场部工作总结
2015/04/30 职场文书
贷款收入证明范本
2015/06/12 职场文书
谢师宴家长致辞
2015/07/27 职场文书