解决表单点击回车（enter）键自动刷新无法提交的问题

2020-01-17 14:10:21

问题还原

在我们写form表单使用回车（enter）键进行提交输入框内的数据时，会发现页面会自动刷新一下，刷新之后输入框内的内容也会清空，并不是直接提交，这样就导致了无法使用回车键提交form表单的死循环问题。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test</title>
    </head>
    <body>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                // 点击button按钮时，进行百度搜索
                $('button').click(function(){
                    var a = $("input").val();
                    window.location.href = ("https://www.baidu.com/s?wd="+a);
                })

                // 按下enter键，执行button按钮点击事件
                $("body").keydown(function(e){
                    if(e.keyCode == "13"){
                        $("button").click();
                    }
                })

            })
        </script>

        <div class="box">
            <form>
                <input type="text">
                <button type="button">提交</button>
            </form>
        </div>
    </body>
</html>

解决办法

方法一
在form标签中添加 onsubmit="return false" （看下方代码）
```
<div class="box">
  <form onsubmit="return false">
      <input type="text">
      <button type="button">提交</button>
  </form>
</div>
```
在form标签中添加onsubmit="return false"意为阻止form表单自动提交行为
方法二
直接删除form标签（看下方代码）
```
<div class="box">
  <input type="text">
  <button type="button">提交</button>
</div>
```
删除form标签也会阻止form标签自动提交问题

推荐使用第一种方法

本文链接：https://heri.ganto.cn/2020/01/17/onsubmit/

本文更新于：2020-09-26 07:58:26

小站声明：如果你需要“转载”、“引用”小站的文章，可以不需要作者同意，请务必标明出处和文章链接。

< vue中的常用指令图片预加载 >