JavaScript 清除输入

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 清除输入

作者：迹忆客最近更新：2024/03/20 浏览次数：

在 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>