遍历所有输入框并清空它们

Question

我该如何使用JavaScript循环遍历页面上的所有输入框并清空其中的数据（使它们都为空）？

- Jason Kelly

---

你不知道如何做哪一部分？是选择它们，迭代集合还是清除它们？换句话说，你尝试了什么？ - I Hate Lazy

Answer 1

尝试这段代码：

​$('input').val('');

这段代码正在循环遍历所有的input标签，并将它们的值设置为空字符串。以下是一个演示：http://jsfiddle.net/maqVn/1/

当然，如果您没有jQuery：

var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i += 1) {
    inputs[i].value = '';
}​​​​

由于我更喜欢函数式编程风格，你可以使用：

Array.prototype.slice.call(
  document.getElementsByTagName('input'))
  .forEach(function (el) {
    el.value = '';
});

- Minko Gechev

---

你如何知道 jQuery 已经加载？ - I Hate Lazy

如果允许使用jQuery，那么 $('input').val(''); 就足够了。 - Yoshi

Answer 2

[].forEach.call(document.getElementsByTagName('input'), function(e){
  e.value = '';
});

编辑：如果你想获取文本区域和其他元素，你可以使用querySelectorAll：

[].forEach.call(
  document.querySelectorAll('input, textarea'), 
  function(e) { e.value = ''; }
);

- elclanrs

---

迄今为止最佳答案。 - cubanGuy

Answer 3

var inputs = document.getElementsByTagName("input"), 
    clearTypes = { "text" : 1, "password" : 1, "email" : 1 }, // etc. you fill this in
    i = inputs.length, 
    input;

while (i) {
    if (clearTypes[(input = inputs[--i]).type]) {
        input.value = "";
    }
}

- Matt

Answer 4

没有使用jQuery：

var list = document.getElementsByTagName('input');
for(var i = 0; i < list.length; i++) {
  if(list[i].type == 'text' || list[i].type == 'password')
    list[i].value = '';
}

- AmShaegar

---

不要使用for-in来进行此操作。它会在迭代中包含除数字索引以外的其他内容。 - I Hate Lazy

你能再解释一下吗？你所说的“不仅仅是数字索引”是什么意思？你能给我一个例子吗？这通常是我解决这类问题的方式，但如果你能向我展示更好的方法，我会很高兴的。 - AmShaegar

JavaScript的for-in是一个通用的枚举器。它将包括对象上的每个可枚举属性，无论是直接在对象上还是继承的。当用于Array对象时，它不仅限于数字索引。它也不能保证特定的枚举顺序。如果您在FireFox中的循环中执行console.log(i);，您将获得索引，但还有length、item和namedItem。最好进行一个由您的代码约束只包括数字索引的迭代。标准的for循环是典型的方式。for(var i = 0; i < list.length; i++) { - I Hate Lazy

谢谢！我会修复它并在将来考虑它。 - AmShaegar

Answer 5

只需注册一个不需要 JavaScript 的替代方案，即可使用 HTML 元素 <input type="reset" /> 清除表单中的所有字段。在某些情况下，这可能已经足够了。

- Erick Petrucelli

Answer 6

你可以像下面这样做：

<script>   
 e = document.getElementsByTagName('input');

    for (i = 0; i < e.length; i++){
    if (e[i].type != 'text') continue;

    e[i].value = '';
    }
</script>

编辑：增加排除那些输入类型不是文本的功能！

- SaidbakR