单击按钮后对清除输入做出反应 - Javascript (1)

📌 相关文章

📜 单击按钮后对清除输入做出反应 - Javascript (1)

📅 最后修改于: 2023-12-03 15:07:20.746000 🧑 作者: Mango

单击按钮后对清除输入做出反应 - JavaScript

在前端开发中，常常会遇到需要单击按钮后对输入值进行清除的需求。本文将介绍如何使用JavaScript来实现这一功能。

实现步骤

获取清除按钮和输入框元素

var clearButton = document.getElementById("clearBtn");
var inputBox = document.getElementById("inputBox");

给清除按钮添加点击事件

clearButton.onclick = function() {
  inputBox.value = ""; //清空输入框的值
};

实现效果

完整代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>清除输入框内容</title>
</head>
<body>
	<label for="inputBox">输入框:</label>
	<input type="text" id="inputBox" placeholder="输入一些内容" />
	<button id="clearBtn">清除</button>

	<script>
		var clearButton = document.getElementById("clearBtn");
		var inputBox = document.getElementById("inputBox");
		clearButton.onclick = function() {
			inputBox.value = "";
		};
	</script>
</body>
</html>

示例

点击这里查看示例。

结语

以上就是使用JavaScript实现清除输入框内容的方法。通过这个功能，用户可以更方便地重新输入新的内容，提高了用户体验。