JavaScript阻止回车提交表单的方法_javascript技巧-js教程-PHP中文网

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

php中文网

发布： 2016-05-16 15:22:45

原创

1531人浏览过

大家对回车键的功能应该比较熟悉，比如在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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1427">
                            <img src="https://img.php.cn/upload/ai_manual/001/431/639/68b6cfeac4857992.png" alt="Supercreator">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1427">Supercreator</a>
                            <p>AI视频创作编辑器，几分钟内从构思到创作。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Supercreator">
                                <span>80</span>
                            </div>
                        </div>
                        <a href="/ai/1427" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Supercreator">
                        </a>
                    </div>
                
<form id="myform">
<input type="text" name="username"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>

登录后复制

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