主页 / 网络编程 /

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

网络编程 2021-07-04 19:19www.168986.cn编程入门
为了防止INPUT按回车form自动提交，可以以下两种方法增加一个隐藏的input。为input增加一个按键事件来阻止form提交。具体详情可以参考下本文

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

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<form action="http://blog.csdn./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./gnail_oug" method="post">
<!--狼蚁网站SEO优化两个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./gnail_oug" method="post">
<!--狼蚁网站SEO优化这个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./gnail_oug" method="post">
<!--狼蚁网站SEO优化两个input获得焦点后按回车form不会自动提交-->
<input type="text" onkeydown="if(event.keyCode==13)return false;">
</form>
</body>
</html>

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

增加一个隐藏的input。

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

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

上一篇：jQuery EasyUI 获取tabs的实例解析 下一篇：详解ECharts使用心得总结

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by