Form onreset 事件

在 web 开发中，表单是非常常见的元素之一，而表单的重置操作是一个常见的需求。当用户点击表单中的重置按钮时，会触发表单的 onreset 事件。在本文中，我们将详细介绍如何使用 onreset 事件来实现一些有趣的功能。

什么是 onreset 事件

onreset 事件是表单元素的一个事件属性，它在表单的重置按钮被点击时触发。通过给表单元素添加 onreset 事件处理程序，我们可以在用户点击重置按钮时执行一些自定义的逻辑。

如何使用 onreset 事件

要使用 onreset 事件，我们首先需要为表单元素添加一个 onreset 属性，并将其设置为一个 JavaScript 函数。这个函数将在用户点击表单的重置按钮时被调用。

// www.javascriptcn.com code example
<form onreset="handleReset()">
  <!-- 表单元素 -->
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

<script>
function handleReset() {
  // 在这里编写重置表单时要执行的逻辑
  console.log("Form has been reset!");
}
</script>

在上面的示例中，当用户点击表单中的重置按钮时，会触发 handleReset 函数，并在控制台输出 "Form has been reset!"。

实际应用场景

除了简单地在控制台输出一条信息，我们还可以利用 onreset 事件来实现一些更有趣的功能。比如，我们可以在用户点击重置按钮时，清空表单中的所有输入内容。

// www.javascriptcn.com code example
<form onreset="clearForm()">
  <!-- 表单元素 -->
  <input type="text" name="username" id="username" placeholder="Username">
  <input type="password" name="password" id="password" placeholder="Password">
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

<script>
function clearForm() {
  document.getElementById("username").value = "";
  document.getElementById("password").value = "";
}
</script>

在上面的示例中，当用户点击表单的重置按钮时，会触发 clearForm 函数，将用户名和密码输入框的值清空。

总结

通过使用 onreset 事件，我们可以在用户点击表单的重置按钮时执行一些自定义的逻辑，从而增强用户体验和交互性。希望本文能帮助你更好地理解和应用 onreset 事件。