jQuery：获取原始输入值

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输入框的内容更改为“two”，HTML看起来仍然相同（值为“one”），但上面的JQuery调用会返回“two”。

JSFiddle示例: http://jsfiddle.net/WRKHk/ 我认为仍然可以获取原始值，因为我们可以调用document.forms["formId"].reset()将表单重置为其原始状态。

- My Head Hurts

---

$(this).get(0) 这种写法有点荒谬，直接用 this 就好了... 在这里你真的不需要使用 jQuery :P - Šime Vidas

Answer 1

试试这个：

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

- graphicdivine

---

+1 是为了 defaultValue，但你忘记提取 DOM 元素了。 - RightSaidFred

谢谢，RightSaidFred。发现得好。 - graphicdivine

对于复选框和单选按钮，你需要使用defaultChecked。 - Brilliand

Answer 2

DOM元素有一个名为"value"的属性，您可以通过以下方式访问：

element.getAttribute('value');

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

演示

请注意，您可以调用.setAttribute('value', 'new value')，这将实际影响在其之后调用任何form.reset()的重置表单。

- David Hedlund

---

但为什么 $( this ).attr( 'value' ) 不返回与 this.getAttribute( 'value' ) 相同的结果呢？我认为它应该会... - Šime Vidas

@ŠimeVidas：定义 bug。如果您希望 attr() 为您提供 attribute 值，那么它最初就存在内置漏洞。如果您希望 attr() 不清楚您处理的是属性还是特性，那么它完美地工作。 - RightSaidFred

@RightSaidFred 原始行为？你的意思是为什么 .attr() 最初被设计为检索 DOM 属性值而不是 HTML 属性值？ - Šime Vidas

@ŠimeVidas：完全正确。您最初说过“attr()为什么不能完全映射到getAttribute()必须有一个有效的原因”。但在1.0版本中，没有向后兼容性问题。;) - RightSaidFred

@RightSaidFred 我的意思是为什么它现在（在1.7中）不能完全映射。在1.0中它没有映射，因为没有 prop()，所以 attr() 被设计用于检索 DOM 属性或内容属性，并且在两者都存在的情况下，属性具有优先权（因为它更重要）。然而，既然我们现在有了 prop()，我希望 attr() 最终能够完全映射。:/ - Šime Vidas

Answer 3

输入元素拥有一个名为defaultValue的属性，用于存储原始值。

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

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

更新的jsFiddle - 改成“two”后，上述代码将返回“one”。

- Shadow Wizard Chasing Stars

Answer 4

HTML确实会改变。只是浏览器的默认查看源代码工具总是显示从服务器获取的原始源代码。如果您使用类似Firebug这样的工具，您就可以看到HTML的动态更改。

获取初始值的一种方法是将其存储在除'value'以外的其他属性中。例如，如果您像这样提供HTML：

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

您可以通过调用以下函数来恢复原始值：

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

- techfoobar

---

+1 - 一个有创意的解决方案，但是@David Hedlund的答案才是我在寻找的答案！ - My Head Hurts

Answer 5

Save the original_values @ document.ready.

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

- Tom Maeckelberghe

Answer 6

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

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

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

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

- will

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

- bondythegreat