使用 javascript 一次选择所有文本框

Question

在我的工作中，我们必须填写很多文本框来进行一些验证。毕竟，我们需要一个接一个地擦除所有内容以重新启动该过程。

有没有办法用javascript擦除所有文本框内容(我们现在唯一可以使用的方法)？也许是 for 循环？

Answer 1

您应该将所有输入字段放在一个表单中，然后通过.reset()方法重置表单。

document.getElementById("reset").onclick= ()=>{
document.getElementById("form").reset()
}

<form id="form">
<input/>
<input/>
</form>
<button id="reset">Reset</button>

查看 W3Schools 上的示例或 MDN 上的文档

Answer 2

如果要将字段恢复为其初始值，请按照@dota2pro的答案的建议重置表单。

OTOH，如果你想清除元素，不管它们的初始值如何，你可以使用类型(又名"标签")CSS选择器通过Document​.query​SelectorAll()查询元素 并循环访问元素，如下所示：

function go() {
let inputs = document.querySelectorAll('input');
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = '';
}
}

<input type="text" value="a"><br>
<input type="text" value="b"><br>
<input type="text" value="c"><br>
<br>
<button onclick="go()">click to clear</button>

请注意：

• document.querySelectorAll('input')获取所有<input>，而不考虑其type属性。
• document.querySelectorAll('input[type="text"]')获取所有<input type="text">。
• document.querySelectorAll('textarea')获取所有<textarea>。
• 如果要合并，可以使用逗号组合器：
  • document.querySelectorAll('input[type="text"],textarea')

Answer 3

你可以在javascript中以不同的方式获得：

• 按 ID ：document.getElementById("id")
• 按班级：document.getElementsByClassName("class")

• 按标签：

  document.querySelectorAll("input")

或 Jquery

• 按 ID ：$("#id")
• 按班级：$(".class")
• 按标签：$("input")

在此处阅读相关文档

Answer 4

tru

[...document.querySelectorAll('input')].map(x=>x.value='')

var clean = () => [...document.querySelectorAll('input')].map(x=>x.value='');

<button onclick="clean()">Clear</button><br>
<input type="text" value="some"><br>
<input type="text" value="short"><br>
<input type="text" value="text"><br>

Answer 5

波纹管代码将选择所有可编辑的文本框

document.querySelectorAll('input[type="text"]:not(:disabled):not([readonly]))')

Answer 6

如果你有可用的 JQuery，你可以做：

$('input[type="text"]').val('');

或者，如果您更喜欢本地版本：

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