JavaScript 清除输入

Anika Tabassum Era 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 onfocus 属性清除输入字段
  2. 在 JavaScript 中使用条件语句清除表单输入值
  3. 使用 reset() 方法来清除 JavaScript 中的表单输入字段
JavaScript 清除输入

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

输出:

使用 onfocus 属性来消除输入字段

当光标放置并单击输入字段时,其内容消失。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>

输出:

使用条件语句清除表单输入值

在这里,我们有一个将采用 idgrab 表单实例。单击按钮时,该函数将检查输入是否为空,并按照条件语句描述的方式执行。

使用 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>

输出:

使用 reset() 方法擦除表单输入字段

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相关文章 - JavaScript Input