页面意外重新加载，导致表单数据消失

Question

^{（注意：此问题旨在作为所有未阻止表单提交操作并导致重新加载页面和丢失输入数据的问题的重复目标和规范答案）。}

1. 我有一个 HTML 表单，当我单击提交按钮时，页面闪烁并且所有表单字段都被重置。

或者

2. 我有一个基于 AJAX 的表单，当我单击提交按钮时，页面闪烁，所有表单字段都被重置，并且我的 AJAX 响应永远不会发生。

或者

3. 我有一个 HTML 表单，没有<input type="submit" />按钮，但有一个普通的<button>元素，当我点击它时，页面闪烁并且所有表单字段都被重置。

或者

4. 我的表单由一个文本字段组成，当我专注于它并按 Enter 键时，页面会闪烁并且所有表单字段都会重置。

或者

5. 我有图像类型的输入，当我单击它们时，页面会刷新并清除表单。

Answer 1

问题？

您没有停止提交表单，浏览器正在重新加载页面，清除输入的所有数据。

情况1

一个基本的 HTML 表单包含一个方法属性（通常是post或get ）和一个操作属性（通常是处理表单的脚本的文件名）。 如果省略或留空，例如<form action="" method="get">或<form method="post"> ，表单会将内容发送回其所在的同一页面。 这种行为可能是可取的，因为通常称为回发，但是这需要在每次加载时处理页面。 如果您不想在表单所在的同一页面上处理表单，请务必在 action 属性中指定处理页面，或使用以下方法之一停止提交表单。

案例2

您正在创建一个使用表单（例如计算器）的页内应用程序，并且不需要提交表单，但是每当您单击某个按钮时，页面就会闪烁并且您不会得到预期的结果。

99% 的时间是因为表单正在提交，而您需要做的是阻止提交事件。 此问题最常见的解决方案是从您的处理 function 中返回 false （ return false ）或阻止提交事件的默认行为（ event.preventDefault ）。

案例3

您有一个没有提交按钮的表单，例如表单中的<input type="submit" />或<button>Click here</button> ，但在单击按钮或图像类型的输入时它正在被提交。 这里最可能的罪魁祸首是<button>元素和类型设置为图像的输入。 button 元素的默认类型是submit ，并且没有指定不同的类型，例如<button type="button"> ，单击 button 元素将立即提交您的表单。 这同样适用于类型设置为图像的输入。 单击该类型的输入将提交一个表单。

案例4

点击表单中的一个元素，例如链接、按钮，可以触发绑定到表单的其他点击事件，进一步提升 DOM 层次结构。 如果您的表单正在侦听比您单击的元素更高级别的事件，则单击事件将在 DOM 中冒泡，触发任何其他单击事件。 这可以通过使用事件的stopPropagation()方法来避免。

案例5

一些浏览器有一个非常古老的古怪行为，当焦点被按下时，一个带有单个文本字段的表单将被提交。 这是基于一个非常古老的规范，该规范指出：

当表单中只有一个单行文本输入字段时，用户代理应接受该字段中的 Enter 作为提交表单的请求。