Question

表单的Javascript重置方法是not supposed to affect hidden inputs，但在IE8和IE7中它仍然可以。有没有人知道让它表现得正常的方法？

我知道我可以通过循环浏览单个输入或在重置表单之前记住值然后恢复它们来实现它，但我想知道是否有人能想出更简单的方法。如果它会使您的解决方案更简单，请随意使用jQuery。您可以在http://jsfiddle.net/Ddtz4/找到示例。

根据author of the plugin，这可能不是IE错误，并且重置方法对没有初始值的元素的影响是未定义的。

Answer 1

您可以使用JavaScript函数捕获重置按钮，将这些值保存为cookie，然后返回true以完成重置过程。在重新加载时，您可以检查这些cookie并将这些值重新插入。

Answer 2

我正在考虑这样的事情，使用jQuery：

$(document).delegate("form", "resetForm", function() {
    $(this).find("input[type=hidden]").each(function() {
        $(this).prop("defaultValue", $(this).val());
    });
    this.reset();
});

每当我想重置表单时，我都可以这样做：

$("#whateverForm").trigger("resetForm");

Answer 3

以下代码片段似乎也适用于IE8

$("#testInput").val('foo');
$("#testForm")[0].reset();
$("#result").html($("#testInput").val());

更新

为什么不创建自定义重置功能（）：

$("#resetbutton").on("click", function() {
    var form = $(this).closest('form');
    form.find("input:not(:hidden)").val('');
    form.find("select").prop('selected', false);
    // so on

});

Answer 4

执行此操作的一种简单方法是在重置时使reset()暂时从表单中删除隐藏的元素

function fixReset() {
    var testForm =  document.getElementById("testForm");
    testForm._nativeReset = testForm.reset;
    testForm.reset = function(){
        var hidden = $('input[type=hidden]',this).detach();
        this._nativeReset();
        $(this).append(hidden);
    }
};
$(document).ready(fixReset);

这样，如果您愿意，仍然可以使用原生重置按钮。这种方法可以很容易地扩展到处理所有形式

防止表单重置方法清除IE8中隐藏输入的最简单方法

4 个答案: