7

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

有没有一种方法可以通过 jQuery 重置 from 而无需选择每个元素并删除属性值。

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

有些喜欢按钮，我不想从中删除值。

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

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

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

5 回答 5

11

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

<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>

小提琴

如果你只需要使用 jQuery：

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

小提琴

于 2013-08-21T17:55:19.230 回答
3

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

在运行 Windows 10 家庭版的 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() 函数会导致修改后的重置按钮调用的自定义重置函数在 form.reset() 之后不执行任何代码。

于 2016-11-19T10:11:38.520 回答
1

如果不使用<form>，则使用 jQuery -

$('span').click(function() {
    $("input").val("")
    $("select option").removeAttr("selected");
    $("textarea").val("");
});
于 2013-08-21T17:57:01.160 回答
0

改变

<span>Reset</span>

至

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

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

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

$("input:reset").click(function() {
   // unbind and reset what is left
});
于 2013-08-21T17:54:44.893 回答
0

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

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

});
于 2013-08-21T18:01:34.497 回答