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

最新推荐文章于 2024-07-11 16:15:56 发布

beautifulsarah

最新推荐文章于 2024-07-11 16:15:56 发布

阅读量1.5k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/beautifulsarah/article/details/53484653

版权

JS 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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>