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

作者:闭包旅人时间:2026-10-29 19:36:24浏览:499

本文介绍如何在JavaScript中阻止用户按下回车键时自动提交表单。通过监听onkeydown或onkeypress事件,判断keyCode是否为13,并返回false以禁用默认提交行为,从而避免误操作导致的表单意外提交。

阻止回车提交表单的原理

回车键在Windows系统的应用程序中常用于启动程序或执行功能,但在Web表单场景中,意外按下回车可能导致表单被错误提交。为了避免这种情况,可以通过简单的代码实现屏蔽回车键的默认提交行为。

防止回车键(Enter)提交表单的核心逻辑非常直接:在表单元素上绑定事件处理,当检测到按键代码为13时返回false。具体实现方式是将类似 onkeydown="if(event.keyCode==13)return false;" 的代码嵌入到 <form> 标签中即可生效。

完整代码示例


<!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> 

上述方法能够有效屏蔽回车键触发的表单提交动作。代码实现简洁明了,若对具体细节存在疑问,欢迎提出建议。感谢读者对本站的一贯支持。

作者最新文章