以下是一个简单的例子,演示如何获取重置按钮的 DOM 对象以及如何使用它:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reset Input Element</title>
</head>
<body>
<form id="myForm">
<label for="nameInput">Name:</label>
<input type="text" id="nameInput" value="John Doe">
<label for="emailInput">Email:</label>
<input type="email" id="emailInput" value="john@example.com">
<input type="reset" value="Reset">
</form>
<script>
// 通过表单 id 获取重置按钮的 DOM 对象
var resetButton = document.getElementById("myForm").reset;
// 添加事件监听器,以便在点击重置按钮时触发
resetButton.addEventListener("click", function() {
// 在控制台输出重置按钮点击事件信息
console.log("Reset button clicked!");
});
</script>
</body>
</html>
在这个例子中,我们通过表单的 id 获取重置按钮的 DOM 对象,并使用 addEventListener 监听点击事件。当用户点击重置按钮时,将触发事件处理程序,并在控制台输出相应的信息。
需要注意的是,重置按钮将重置表单中所有输入字段的值为它们的初始值。如果没有提供初始值,那么将重置为空或默认值。
转载请注明出处:http://www.zyzy.cn/article/detail/4405/HTML