在 <form> 元素内按下回车按钮时，Javascript 文件会重新加载。为什么？答案

【问题标题】：Javascript file is re-loaded when pressing enter button inside an <form> element. Why?在 <form> 元素内按下回车按钮时，Javascript 文件会重新加载。为什么？
【发布时间】：2014-11-06 10:08:53
【问题描述】：

我有这个 html 示例代码

<html>
  <head>
    <title>Form Test</title>
    <script src="./testScript.js"></script>
  </head>

  <body>
    <form>
      <input id="textField" type="text" placeholder="Type in your name">
    </form>
  </body>
</html>

testScript.js 文件只包含一行：alert("hello");

当我在输入元素中写入内容并按下回车按钮时，将重新加载 javascript 文件并触发警报。我注意到当我删除表单时，不会触发重新加载。

为什么会这样？以及如何防止在表单内按下回车按钮时重新加载 javascript 文件？

【问题讨论】：

标签： javascript html

【解决方案1】：

如果没有特定的属性，表单的方法将是get，所以在输入字段中按回车将通过GET方法提交表单。页面将因此重新加载并加载 javascript 文件，并触发警报。

【讨论】：

谢谢@LS11，好的，所以默认参数是请求同一页面的GET方法？我没有注意到整个页面再次重新加载，我只是注意到javascript文件重新加载已加载。
是的。如果您希望表单提交到另一个页面，您需要使用 action="otherpage.php" 参数指定。
如果您在输入字段中添加名称属性，然后按回车键，您会注意到页面已重新加载，因为 URL 将变为 yourpage.html?foo=

【解决方案2】：

我认为您的代码存在错误。您没有关闭输入元素。只需像这样修改html：

 <input id="textField" type="text" placeholder="Type in your name"/>

【讨论】：

不，输入元素不需要结束标签。