jquery - 如何重置默认情况下来自 value 属性的 html 表单值

Question

我想重置我的 html 表单。使用<input type="reset">它只是重置页面加载后填充的输入值，而不重置 value 指定的值属性

我尝试过以下方法，但没有成功。

观看我的FIDDLE (评论了一种方法)

HTML

<form id="searchfrm">
   <input type="text" value="hiii">
   <input type="reset" class="rest">
</form>    

JQUERY

$(".rest").on("click", function(event){
      $('#searchfrm input').val('');
});

/*
$(".rest").on("click", function(event){
      $('#searchfrm input')[0].reset();
});
*/

感谢任何帮助

Answer 1

输入类型重置具有一些默认行为，必须阻止这些行为才能使您的代码正常工作。重置输入将所有输入设置为 value 属性的值(在 HTML 标记中声明的属性)。这覆盖了 jQuery .val() 功能，因为默认行为发生在 jQuery 设置值之后。

$(".rest").on("click", function(event){
      event.preventDefault();
      $('#searchfrm input').val('');
});

编辑进一步说明

jQuery .val() 的行为类似于 input.value。这设置了属性。jQuery .attr() 的行为类似于 input.setAttribute()。这会设置属性。Reset 使用 Element 的 value 属性而不是 value 属性。例如，以下代码也可以工作。

$(".rest").on("click", function(){
    $('#searchfrm input').attr('value', '');
});