如何防止INPUT按回车自动提交表单FORM

时间：2021-05-18

form中的input只有一个，input获得焦点时按回车会form自动提交：

<!doctype html><html><head><meta charset="UTF-8"><title>test</title></head><body><form action="http://blog.csdn.net/gnail_oug" method="post"><!--input获得焦点后按回车form自动提交--><input type="text"></form></body></html>

有多个input时(不管是否是隐藏的)，任意一个input获得焦点都不会提交。

<!doctype html><html><head><meta charset="UTF-8"><title>test</title></head><body><form action="http://blog.csdn.net/gnail_oug" method="post"><!--下面两个input获得焦点后按回车form都不会自动提交--><input type="text"><input type="text"></form></body></html>

或

<!doctype html><html><head><meta charset="UTF-8"><title>test</title></head><body><form action="http://blog.csdn.net/gnail_oug" method="post"><!--下面这个input获得焦点后按回车form不会自动提交--><input type="text"><!-- 这里是通过样式隐藏，不等于<input type="hidden"> ,使用type="hidden"同样会提交 --><input type="text" style="display: none;"></form></body></html>

单个input时，通过事件阻止form提交：

<!doctype html><html><head><meta charset="UTF-8"><title>test</title></head><body><form action="http://blog.csdn.net/gnail_oug" method="post"><!--下面两个input获得焦点后按回车form不会自动提交--><input type="text" onkeydown="if(event.keyCode==13)return false;"></form></body></html>

所以，为了防止INPUT按回车form自动提交，可以以下两种方法：

增加一个隐藏的input。

为input增加一个按键事件来阻止form提交。

以上所述是小编给大家介绍的防止INPUT按回车自动提交表单FORM的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章