如何使用 jQuery 在事件上重置表单元素（输入、选择、文本区域等）答案

【问题标题】：How to reset forms elements (input,select,textarea,etc.) on events using jQuery如何使用 jQuery 在事件上重置表单元素（输入、选择、文本区域等）
【发布时间】：2013-08-21 17:51:48
【问题描述】：

例如，我需要在单击跨度后重置表单元素。

有没有办法通过jQuery重置from而不选择每个元素并删除属性值。

一些没有属性值的元素，如textarea或radio

还有一些像 button 我不想从中删除值。

我想使用 jQuery 在其他事件上使用重置

代码例如http://jsfiddle.net/pgNrF/

<input type="button" value="Input Button">
<input type="checkbox">
<input type="hidden">
<textarea></textarea>
<span>Reset</span>

【问题讨论】：

您可能想查看this question，其中详细讨论了通过 jQuery 重置表单的概念。

标签： javascript jquery

【解决方案1】：

如果您将这些表单元素包装在实际表单中，这已经内置：

<form id="myform">  
    <input type="button" value="Input Button">
    <input type="checkbox">
    <input type="file">
    <input type="hidden">
    <input type="image">
    <input type="password">
    <input type="radio">
    <input type="submit">
    <input type="text">
    <select>
        <option>Option1</option>
        <option>Option2</option>
        <option>Option3</option>
    </select>
 
    <textarea></textarea>
    <button type="button">Button</button> 

    <button type="reset">Reset</button>
</form>

FIDDLE

如果你只需要使用 jQuery：

$('span').click(function() {
    $('#myform').get(0).reset();
});

FIDDLE

【讨论】：

我需要使用jQuery来重置其他事件，而不是通过用户点击来休息
@Jim - 添加了一个 jQuery 解决方案，你仍然应该调用原生的 form.reset() 方法

【解决方案2】：

关于重置文本区域的最新评论。

在运行 Windows 10 Home 版本的 PC 上使用 Chrome 版本 54.0.2840.99 m，我发现由常规/未修改的重置按钮或 form.reset() 语句调用的本机/内置重置功能确实恢复 textarea 的初始字段值，但前提是之前没有以编程方式清除 textarea，例如使用清空 textarea 的 innerHTML 的自定义清除按钮。

第一次加载 textarea 时没有默认值，这是无法观察到的，但是如果 textarea 被编码为显示以前发布的表单的数据，那么 textarea 可能不为空，并且重置 textarea 应该设置将字段设置为加载表单时的值。

我发现当 textarea 的 innerHTML 被清空时，本机重置使用的 textarea 的 defaultValue 属性被错误地清除，然后随后的重置只是清除了 textarea 而不是按预期重置 textarea。我认为这是一个错误，因为与清除和重置其他文本输入字段相比，textarea 的工作方式不同。

可以通过将自定义的 initialValue 属性添加到 textarea 并将 innerHTML 值分配给它来解决这种“奇怪的人”行为。由于本机重置和自定义清除功能不会影响自定义属性，因此该值被保留，并可用于通过覆盖重置按钮调用将 textarea 的 innerHTML 设置为 initialValue 属性值的函数来恢复 textarea 的值和然后调用 form.reset() 函数来处理其他输入字段。注意调用form.reset()函数会导致修改后的reset按钮调用的自定义reset函数在form.reset()之后不执行任何代码。

【讨论】：

【解决方案3】：

如果不使用<form>，那么使用jQuery -

$('span').click(function() {
    $("input").val("")
    $("select option").removeAttr("selected");
    $("textarea").val("");
});

【讨论】：

【解决方案4】：

改变

<span>Reset</span>

到

<input type='reset' value='Reset'>

已将所有表单值重置为默认值。

如果您还需要取消绑定某些事件，您可以使用 jQuery 来完成：

$("input:reset").click(function() {
   // unbind and reset what is left
});

【讨论】：

我需要使用 jQuery 来重置其他事件

【解决方案5】：

如果您不使用重置按钮，请使用此 jquery 代码

 $('span').click(function() {
    $('input').val('');
    $("textarea").val('');

});

【讨论】：