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

最新推荐文章于 2024-11-30 14:49:25 发布

beautifulsarah

最新推荐文章于 2024-11-30 14:49:25 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/beautifulsarah/article/details/53484653

JS 专栏收录该内容

28 篇文章

订阅专栏

本文探讨了HTML表单中单个input与多个input时，按回车键的不同行为表现。当表单内只有一个input时，按回车键将直接提交表单；若有多个input，则不会自动提交。文章还介绍了如何通过添加隐藏input或使用JavaScript阻止默认提交行为的方法。

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

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

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