JavaScript阻止回车提交表单的方法

 更新时间:2015年12月30日 13:58:10   转载 作者:程序员小菜  
如何防止回车(enter)键提交表单,其实很简单,就一句话。onkeydown="if(event.keyCode==13)return false;"把这句写在from标签里面就好了

大家对回车键的功能应该比较熟悉,比如在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> 

以上代码可以屏蔽点击回车提交表单的功能。代码简单易懂,有不明白的欢迎提出宝贵意见,谢谢大家一直以来对脚本之家网站的支持。

相关文章

  • JS模拟简易滚动条效果代码(附demo源码)

    JS模拟简易滚动条效果代码(附demo源码)

    这篇文章主要介绍了JS模拟简易滚动条效果代码,可模拟出滚动条拖动显示的效果,涉及JavaScript鼠标事件的响应及页面元素运算的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2016-04-04
  • webpack开发跨域问题解决办法

    webpack开发跨域问题解决办法

    本篇文章主要介绍了webpack开发跨域问题解决办法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • bootstrap table实现横向合并与纵向合并

    bootstrap table实现横向合并与纵向合并

    这篇文章主要为大家详细介绍了bootstrap table实现横向合并与纵向合并,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 微信小程序入口场景的问题集合与相关解决方法

    微信小程序入口场景的问题集合与相关解决方法

    这篇文章主要介绍了微信小程序入口场景的问题集合与相关解决方法,从零开始开发一个小程序,大多数坑点都是在微信小程序的各个入口场景处。所以这里整理一下微信小程序的各个入口场景会面临的问题以及解决方案,需要的朋友可以参考下
    2019-06-06
  • 禁用Enter键表单自动提交实现代码

    禁用Enter键表单自动提交实现代码

    这篇文章主要介绍了禁用Enter键表单自动提交实现代码,需要的朋友可以参考下
    2014-05-05
  • 微信小程序之几种常见的弹框提示信息实现详解

    微信小程序之几种常见的弹框提示信息实现详解

    这篇文章主要介绍了微信小程序之几种常见的弹框提示信息实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • chorme 浏览器记住密码后input黄色背景处理方法(两种)

    chorme 浏览器记住密码后input黄色背景处理方法(两种)

    使用chrome浏览器选择记住密码的账号,输入框会自动加上黄色的背景,有些设计输入框是透明背景的,需要去除掉这个黄色的背景。下面给大家分享chorme 浏览器记住密码后input黄色背景处理方法,一起看看吧
    2017-11-11
  • js实现带圆角的多级下拉菜单效果

    js实现带圆角的多级下拉菜单效果

    这篇文章主要介绍了js实现带圆角的多级下拉菜单效果,通过调用封装的js库ocscript.js实现圆角下拉菜单功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • Three.js开发实现3D地图的实践过程总结

    Three.js开发实现3D地图的实践过程总结

    这篇文章主要给大家介绍了关于利用Three.js开发实现3D地图的实践过程,文中通过示例代码介绍的非常详细,对大家学习或者使用three.js具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • JavaScript基于对象去除数组重复项的方法

    JavaScript基于对象去除数组重复项的方法

    这篇文章主要介绍了JavaScript基于对象去除数组重复项的方法,结合实例形式分析了javascript数组去重的操作步骤与具体实现技巧,需要的朋友可以参考下
    2016-10-10

最新评论