HTML防止input回车提交表单

最新推荐文章于 2023-04-21 14:36:16 发布

转载最新推荐文章于 2023-04-21 14:36:16 发布 · 643 阅读

文章标签：

#input #提交 #form

前端专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何防止网页表单中的单个输入框在用户按下回车键时自动提交，通过添加隐藏按钮及JavaScript阻止默认行为的方法实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决方案：

1.解决单个输入框的回车即提交问题，可以增加一个隐藏的input="text" display='none'; 然后type类型为button。

<!-- enter不会自动提交数据 -->  
<form action="www.baidu.com" method="post">  
    <input type="text" value="" />  
    <input type="text" value="" />  
    <button type="button">提交</button>  
    <!-- 等价于<input type='button' value='提交'> -->  
</form>

2.在form表单或input中加入：onkeydown="if(event.keyCode==13){return false;}"

<!-- enter不会自动提交数据 -->  
<form action="www.baidu.com" method="post">  
    <input type="text" value="" onkeydown="if(event.keyCode==13){return false;}"/>  
    <input type="text" value="" onkeydown="if(event.keyCode==13){return false;}"/>  
    <button>提交</button>  
    <!-- 或在对应input上添加，同时建议取消自动填充，因为mac下会有问题<input type="text" value="" autocomplete="off" onkeydown="if(event.keyCode==13){return false;}" /> -->  
</form>

注意：return false;如果写在form上，那么textarea 不能换行，所以选择写在input上

原文：http://blog.youkuaiyun.com/ligang2585116/article/details/44699567