JS 清空input文本框的值|极客笔记

JS 清空input文本框的值

在前端开发中，经常会遇到需要清空input文本框的值的情况。比如在表单提交成功后，需要将输入框清空以便用户继续输入新的内容。本文将详细介绍如何使用JavaScript来实现清空input文本框的值，并提供一些示例代码帮助理解。

方法一：使用JavaScript设置input的value属性为空

一种简单直接的方法就是使用JavaScript来获取并清空input文本框的值。我们可以通过以下步骤来实现：

首先，需要获取到对应的input元素。
然后，使用JavaScript中的value属性将input值设置为空字符串。

下面是示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Clear Input Value</title>
</head>
<body>
  <input type="text" id="myInput" value="Hello, World!">
  <button onclick="clearInput()">Clear Input</button>

  <script>
    function clearInput() {
      document.getElementById("myInput").value = "";
    }
  </script>
</body>
</html>

在上面的示例中，我们创建了一个包含一个input元素和一个按钮的简单HTML页面。当点击按钮时，调用了clearInput函数，该函数获取了输入框的元素并将其值设置为空字符串，实现了清空输入框的效果。

方法二：使用jQuery库清空input文本框的值

除了原生JavaScript，我们还可以使用jQuery库（一个流行的JavaScript库）来更加便捷地清空input文本框的值。使用jQuery，我们只需要通过选择器获取到对应的input元素，然后使用val()方法来设置input的值为空。

以下是使用jQuery清空input文本框值的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Clear Input Value with jQuery</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="text" id="myInput" value="Hello, World!">
  <button id="clearButton">Clear Input</button>

  <script>
     $("#clearButton").click(function() {$ ("#myInput").val("");
    });
  </script>
</body>
</html>

在上面的示例中，我们首先引入了jQuery库，然后通过选择器获取了input元素和清空按钮。当点击按钮时，调用了匿名函数用来清空输入框的值。

方法三：使用原生JavaScript的reset方法

除了直接设置input的值为空，我们还可以使用在<form>标签上调用reset()方法来清空表单内所有input元素的值。这种方法适用于我们需要清空整个表单而不仅仅是某一个input文本框的场景。

以下是使用reset()方法清空表单的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Reset Form</title>
</head>
<body>
  <form id="myForm">
    <input type="text" id="input1" value="Input 1">
    <input type="text" id="input2" value="Input 2">
  </form>
  <button id="resetButton">Reset Form</button>

  <script>
    document.getElementById("resetButton").onclick = function() {
      document.getElementById("myForm").reset();
    };
  </script>
</body>
</html>

在上面的示例中，我们创建了一个包含两个input元素的表单。当点击“Reset Form”按钮时，表单内的所有input元素的值都会被重置为初始值，实现了清空表单的效果。