JQuery:获取原始输入值

时间:2011-12-13 14:01:02

标签: javascript jquery input

是否可以获取表单输入字段的初始值?

例如:

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

但是,如果用户随后将#one输入字段的内容更改为2,则html看起来仍然相同(其中一个作为值),但上面的JQuery调用将返回两个。

JSFiddle玩:http://jsfiddle.net/WRKHk/

我认为仍然可以获得原始值,因为我们可以调用document.forms["formId"].reset()将表单重置为原始状态。

7 个答案:

答案 0 :(得分:32)

试试这个:

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

答案 1 :(得分:14)

DOM元素具有属性“value”,您可以通过以下方式访问该属性:

element.getAttribute('value');

...可能与元素的属性 value不同。

Demo

请注意,您可以致电.setAttribute('value', 'new value'),这实际上会影响之后调用的任何form.reset()

答案 2 :(得分:9)

输入元素获得了名为defaultValue的属性,该属性存储了原始值。

要通过jQuery访问它,只需使用.prop()

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

Updated jsFiddle - 更改为“2”后,上面将返回“1”。

答案 3 :(得分:2)

HTML确实发生了变化。只是浏览器的默认视图源工具始终显示从服务器获取的原始源。如果你使用类似Firebug的东西,你将能够看到HTML中的动态变化。

获取初始值的一种方法是将其存储在除“值”之外的附加属性中。例如,如果您提供的HTML如下:

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

您可以随时致电:

取回原始值
$("#one").attr("origvalue");

答案 4 :(得分:0)

Save the original_values @ document.ready.

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

答案 5 :(得分:0)

您可以尝试将值存储在数据中。例如:

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

然后您可以像以下一样轻松地检索它:

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

答案 6 :(得分:0)

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 );
});