JavaScript 清除输入
Anika Tabassum Era
2024年2月15日
JavaScript
JavaScript Input
在 JavaScript 中，我们通常会考虑一个特定的属性来处理输入值。value 属性与 getElementById() 方法一起获取输入字段的详细信息。
稍后，我们可以根据条目执行一些条件。同样，我们也可以依赖一些 HTML 属性来连接输入元素和 JavaScript 函数。
在这里，我们将展示一些可以通过多种方式实现的示例。
在 JavaScript 中使用 onfocus 属性清除输入字段
我们将首先为该示例声明一个具有定义值的输入字段。此外，一旦光标指向或聚焦在输入框中，输入元素将跳转以执行函数 clearF(this)。
如果满足函数的条件，它将删除该值，从而清除输入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
</head>
<body>
<input type="text" value= "abc@gmail.com" onfocus="clearF(this)">
<script>
function clearF(target) {
if (target.value == 'abc@gmail.com') {
target.value = "";
}
}
</script>
</body>
</html>
输出：
当光标放置并单击输入字段时，其内容消失。this 指的是它对特定元素的值。
在 JavaScript 中使用条件语句清除表单输入值
根据一个表单提交，需要有一个对应的按钮元素来存储数据。我们将采用一个 form 元素，与之关联的 button 将带有一个 onclick 属性来触发一个函数。
该函数将检查输入字段是否为空。如果它找到任何内容，它将简单地将其重新初始化为空。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
</head>
<body>
<form>
<input type="text" id="name">
<input type="button" value="clear" onclick="clearF()">
</form>
<script>
function clearF() {
var grab = document.getElementById("name");
if (grab.value !="") {
grab.value = "";
}
}
</script>
</body>
</html>
输出：
在这里，我们有一个将采用 id 的 grab 表单实例。单击按钮时，该函数将检查输入是否为空，并按照条件语句描述的方式执行。
使用 reset() 方法来清除 JavaScript 中的表单输入字段
我们还将检查表单以通过 reset() 方法清除其输入。它所需要的只是创建表单的一个实例，然后单击按钮，它将重置整个表单，使插入的内容消失。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
</head>
<body>
<form id="Form">
Name: <input type="text"><br><br>
<input type="button" onclick="myFunction()" value="Reset form">
</form>
<script>
function myFunction() {
document.getElementById("Form").reset();
}
</script>
</body>
</html>
输出：
%60-Method-to-Erase-Form-Input-Fields.webp)
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
