Question

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

我尝试了以下appo，但它没有用。

观看我的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

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

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

编辑进一步说明

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

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

Answer 2

将其更改为：

$(".rest").on("click", function(event){
   $('#searchfrm input[type="text"]').attr('value','');
});

以下是Fiddle

如何重置默认值属性的html表单值

2 个答案: