Question

如果我有这样的代码：

<form id="test_form">
   <input type="text" value="Original value" />
</form>

然后使用jQuery运行此代码：

$('#test_form input').val('New value');

所以输入有新的价值，但我想得到旧的，所以我这样做：

$('#test_form')[0].reset();

现在$('#test_form input').val() == 'Original value';

但重置方法重置所有表单输入并恢复默认值，那么如何在确定输入中恢复默认值？

Answer 1

on jQuery 1.6 +

$('#test_form input').prop('defaultValue');

旧版本上的

使用.attr()代替.prop()

Answer 2

您可以使用defaultValue属性：

this.value = this.defaultValue;

例如，以下代码会在触发blur事件时将字段重置为其默认值：

$("#someInput").blur(function() {
   this.value = this.defaultValue; 
});

这是一个working example。

Answer 3

您可以使用defaultValue属性轻松构建一个插件来执行此操作，该属性对应于元素的原始状态。

$.fn.reset = function() {
    this.each(function() {
        this.value = this.defaultValue;
    });
};

然后你可以像这样调用这个插件：

$('someSelector').reset();

Answer 4

尝试jQuery等同于JavaScript的.getAttribute('value') - 即使值本身也不会改变属性。

Answer 5

我建议将placeholder属性用于输入和textareas。

Answer 6

//  Sample Usage
//  $(document).ready(function(){ $.snapshot("#myForm"); }); Take shapshot
//  event, function(){ $.reset("#myForm"); }  Rest Form On Some Event

(function($) { 
    $.fn.getAttributes = function() { 
        var attributes = {};  

        if(!this.length) 
            return this; 

        $.each(this[0].attributes, function(index, attr) { 
            attributes[attr.name] = attr.value; 
        });  

        return attributes; 
    } 
})(jQuery);

(function($)
{   
    jQuery.snapshot = function(form)
    {
        var form = $(form);

        var elements = form.find("input, select, textarea");

        if(elements && elements.length)
        {
            elements.each(function(){

                var attributes = $(this).getAttributes();
                var tagName = $(this).prop("tagName").toLowerCase();
                var safe_attributes = {};

                for(i in attributes)
                {
                    var jq_attr = $(this).attr(i);

                    if(jq_attr != "undefined")
                    {
                        safe_attributes[i] = jq_attr;
                    }
                }

                if(tagName == "select")
                {
                    var option = $(this).find("option:selected");
                    if(option && option.length)
                    {
                        var init_selected = option.attr("value");
                        safe_attributes['init_selected'] = init_selected;
                    }
                }

                if(tagName == "textarea")
                {
                    var init_value = $(this).val();
                    safe_attributes['init_value'] = init_value;
                }

                $.data( $(this).get(0), "init_attr", safe_attributes );
            });
        }
    }

    jQuery.reset = function(form)
    {
        var form = $(form);

        var elements = form.find("input, select, textarea");

        var reset_btn = $('<input type="reset" name="reset" />');

        form.append(reset_btn);

        reset_btn.trigger("click");

        reset_btn.remove();

        if(elements && elements.length)
        {
            elements.each(function(){

                var init_attributes = $(this).data("init_attr");
                var attributes = $(this).getAttributes();
                var tagName = $(this).prop("tagName").toLowerCase();

                for(i in attributes)
                {
                    if(i.toLowerCase() == "value" || i.toLowerCase() == "checked" || i.toLowerCase() == "selected")//if(i.toLowerCase() != "type")
                    {
                        var attr_found = false;

                        for(a in init_attributes)
                        {
                            if(i == a)
                            {
                                $(this).attr(a, init_attributes[a]);
                                attr_found = true;
                            }
                        }

                        if(!attr_found)
                        {
                            $(this).removeAttr(i);
                        }
                    }
                }

                if(tagName == "select" && 'init_selected' in init_attributes)
                {
                    $(this).find("option:selected").removeAttr("selected");
                    var option = $(this).find("option[value="+init_attributes['init_selected']+"]");
                    if(option && option.length)
                    {
                        option.attr("selected", "selected");
                    }
                }

                if(tagName == "textarea")
                {
                    if('init_value' in init_attributes)
                    {
                        $(this).val(init_attributes['init_value']);
                    }
                }

                $(this).trigger("change");

            });
        }
    }
})(jQuery);

Jquery表单获取默认值

6 个答案: