Question

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

例如：

<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()将表单重置为原始状态。

Answer 1

试试这个：

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

Answer 2

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

element.getAttribute('value');

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

Demo

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

Answer 3

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

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

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

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

Answer 4

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

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

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

您可以随时致电：

取回原始值

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

Answer 5

Save the original_values @ document.ready.

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

Answer 6

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

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

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

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

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

JQuery：获取原始输入值

7 个答案: