表单的 reset() 方法不会使用值属性重置输入

Question

为什么当我调用表单的reset()方法时，没有重置具有值属性的第二个输入？清理具有值属性输入的表单的最佳方法是什么？

<form id="myform">
<input type="text" />
<input type="text" value="1" />
<button id="reset" name="reset" onclick="document.getElementById('myform').reset()">reset</button>
</form>

Answer 1

这里不需要 JavaScript。只需将按钮的type属性设置为reset。

<form>
<input type="text" />
<input type="text" value="1" />
<button id="reset" name="reset" type="reset">reset</button>
</form>

默认情况下，form中的button元素将提交表单。

Answer 2

使用 JQuery

$("#reset").on("click" , function() {
$("input[type=text]").val("");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" />
<input type="text" value="1" />
<button id="reset" name="reset" type="button">reset</button>
</form>

Answer 3

重置按钮将表单重置为初始值，而不是空值。如果要完全重置表单，则应使用空表单，然后在将表单放置到文档后手动设置值。例如，将 id 应用于要预设的字段，然后使用类似

const filedValues = [{
id: 'name',
value: '1'
},
{
id: 'text',
value: 'test text'
}
];
filedValues.forEach(fieldItem => {
const {
id,
value
} = fieldItem;
document.getElementById(id).value = value;
})

<form>
<input type="text" id="name" name="name" />
<input type="text" name="text" id="text" />
<button id="reset" name="reset" type="reset">reset</button>
</form>

Answer 4

只有一个行代码：

this.form.querySelectorAll('input[type=text]').forEach(function(input,i){input.value='';})

看：

<form>
<input type="text" value="0"/>
<input type="text" value="1" />
<button id="reset" name="reset" onclick="this.form.querySelectorAll('input[type=text]').forEach(function(input,i){input.value='';})">reset</button>
</form>

注意：无需向button添加type=reset