JQuery：获取原始输入值答案

【问题标题】：JQuery: Get original input valueJQuery：获取原始输入值
【发布时间】：2012-01-19 09:34:42
【问题描述】：

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

例如：

<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 输入字段的内容更改为两个，则 html 看起来仍然相同（值为一个），但上面的 JQuery 调用将返回两个。

要玩的 JSFiddle：http://jsfiddle.net/WRKHk/

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

【问题讨论】：

$(this).get(0) 是一种可笑的写作方式this...你真的不必在这里使用jQuery :P

标签： javascript jquery input

【解决方案1】：

试试这个：

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

【讨论】：

+1 for defaultValue，但您忘记提取 DOM 元素。
谢谢，RightSaidFred。很好发现。
对于复选框和单选按钮，您需要使用 defaultChecked。

【解决方案2】：

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

element.getAttribute('value');

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

Demo

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

【讨论】：

@David 但是为什么$( this ).attr( 'value' ) 不返回与this.getAttribute( 'value' ) 相同的结果？我认为应该...
@RightSaidFred 你的意思是这是一个错误？我觉得很难相信。 attr() 方法已经存在了很长时间。现在应该已经删除了所有错误。 attr() 没有完全映射到 getAttribute() 一定有正当理由...
@ŠimeVidas：定义错误。如果您希望 attr() 为您提供 attribute 值，那么它最初是使用内置错误创建的。如果您希望 attr() 不清楚您是在处理属性还是属性，那么它可以完美地工作。
@ŠimeVidas：没错。您最初说attr() 没有完全映射到getAttribute() 一定有正当理由。但是在版本1.0 中没有向后兼容性问题。 ;)
@RightSaidFred 我的意思是为什么它现在不能完全映射（在 1.7 中）。它在 1.0 中没有映射，因为没有 prop()，所以 attr() 旨在检索 DOM 属性或内容属性，并且在两者都存在的情况下，该属性具有优先权（因为它更重要）。但是，由于我们现在确实有prop()，我希望attr() 能够完全映射（最后）。 :/

【解决方案3】：

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

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

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

Updated jsFiddle - 改成“二”后，上面会返回“一”。

【讨论】：

【解决方案4】：

HTML 确实发生了变化。只是浏览器的默认查看源代码工具总是向您显示从服务器获取的原始源代码。如果您使用 Firebug 之类的工具，您将能够看到 HTML 中的动态变化。

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

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

你总是可以通过调用来取回原来的值：

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

【讨论】：

+1 - 一种创造性的解决方案，但@David Hedlund 的答案正是我想要的！

【解决方案5】：

Save the original_values @ document.ready.

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

【讨论】：

【解决方案6】：

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

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

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

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

【讨论】：