JQuery: Get original input value

问题:

Is it possible to get the initial value of a form input field?

For example:

<form action="" id="formId">
    <input type="text" name="one" value="one" id="one" />
</form>

$("#one").attr("value");   //would output "one"
$("#one").val();           //would output "one"
$("#one").get(0).value;    //would output "one"

However, if the user then changed the content of the #one input field to two, the html would still look the same (with one as the value) but the JQuery calls above would return two.

JSFiddle to play with: http://jsfiddle.net/WRKHk/

I think that this must still be possible to get the orginal value, since we are able to call document.forms["formId"].reset() to reset the form to its original state.

回答1:

The DOM element has the attribute "value" which you can access by:

element.getAttribute('value');

... which may be different from the element's property value.

Demo

Note that you may call .setAttribute('value', 'new value') which will actually affect any form.reset() that is called after.

回答2:

Try this:

$("#one")[0].defaultValue;

回答3:

Input element got property called defaultValue that is storing the original value.

To reach it via jQuery, just use .prop():

var value = $(this).prop("defaultValue");

Updated jsFiddle - after changing to "two", the above will return "one".

回答4:

The HTML does change. Just that the browser's default view source tool always shows you the original source fetched from server. If you use something like Firebug, you'll be able to see the dynamic changes in HTML.

One way of getting the initial value is by storing it in an additional attribute in addition to 'value'. For example, if you serve out your HTML like:

<input type="text" name="one" value="one" origvalue="one" id="one" />

You can always get back the original value by calling:

$("#one").attr("origvalue");

回答5:

Save the original_values @ document.ready.

$(function(){
  var original_values = $.map($('form input'), function(input){ return $(input).val() });
})

回答6:

You could try storing the value in data. For example:

$('#one').data('val',$('#one').val());

And then you could easily retrieve it later like this:

console.log($('#one').data('val'));

回答7:

var initialVal = $('#one').val();
alert(initialVal);
$('#one').live("focusout", function() {
    var attribute = $("#one").attr("value");
    var value = $(this).val();
    var get = $(this).get(0).value;
    alert( "Attribute: " + attribute + "\n\nValue: " + value + "\n\ninit val: " + initialVal +"\n\nGet: " + get );
});