JS清空input文本框的值

一、基础用法

清空input文本框的值最简单的方法是通过赋空字符串的方式来实现：

// 获取input元素
var input = document.getElementById('inputElement');

// 清空值
input.value = '';



上面这段代码，首先获取了一个id为“inputElement”的input元素，然后将其value属性设置为空字符串，从而清空了文本框的值。

这种方法比较直观、简单易懂。但是需要注意的是，如果你需要清空多个input文本框，那么就需要编写多个类似的代码块，这显然不够优雅。

二、封装为函数
为了更好地重用代码，可以将清空input文本框的值的操作封装成一个函数，方便在需要的时候直接调用：

/**
 * 清空input文本框的值
 * @param {string} id - input元素的id
 */
function clearInputValue(id) {
  var input = document.getElementById(id);
  input.value = '';
}

// 调用示例
clearInputValue('inputElement');


上述代码中，我们定义了一个名为“clearInputValue”的函数，它接受一个字符串类型的参数“id”，函数内部通过document.getElementById()方法获取到对应id的input元素，并将其value属性设置为空字符串，从而清空了文本框的值。在调用函数时，只需要传入对应的id即可。

这样，清空input文本框的操作就变得非常方便了。只需要调用一次函数即可清空一个文本框的值。

三、遍历清空
如果你的页面上有多个input文本框需要清空，可以通过遍历文本框的方式来逐一清空：

/**
 * 清空多个input文本框的值
 * @param {string} selector - input元素的选择器
 */
function clearInputValues(selector) {
  var inputs = document.querySelectorAll(selector);
  inputs.forEach(function(input) {
    input.value = '';
  });
}

// 调用示例
clearInputValues('input[type="text"]');


上面这段代码，我们定义了一个名为“clearInputValues”的函数，它接受一个字符串类型的参数“selector”，函数内部通过document.querySelectorAll()方法获取到所有符合指定选择器的input元素，然后通过forEach()方法遍历所有的input元素，将其value属性设置为空字符串，从而清空了文本框的值。

需要注意的是，通过querySelectorAll()获取到的元素列表是一个NodeList对象，需要通过forEach()方法来遍历。而在forEach()方法中，我们定义了一个名为“input”的参数，表示当前正在遍历的input元素。

四、结合表单重置
对于一个包含多个input文本框的表单来说，我们也可以通过表单的“重置”功能来清空所有文本框的值。

在表单中，默认带有一个名为“reset”的按钮，它的作用就是重置表单内所有input元素的值。我们甚至不需要编写任何JavaScript代码，只需要给表单添加一个type为“reset”的按钮即可：


  姓名:
  


  年龄:
  


  


上述代码中，我们通过type为“reset”的按钮实现了清空多个input文本框的值的功能。需要注意的是，这种清空方法不仅会清空文本框的值，还会重置其他表单元素，例如单选框、复选框、下拉框等。

五、结语
清空input文本框的值是一个很常见、基础的操作。在实际开发中，我们需要根据具体的场景和需求，选择不同的清空方式。本文介绍了基础用法、封装为函数、遍历清空和结合表单重置等多种清空方式，希望能够帮助读者更好地理解和运用JavaScript技巧。