JavaScript 清除输入
Anika Tabassum Era
2024年2月15日
![JavaScript 清除输入](/img/JavaScript/feature-image---javascript-clear-input.webp)
在 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>
输出: