2011-12-13 71 views
20

是否可以獲取表單輸入字段的初始值?JQuery:獲取原始輸入值

例如:

<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()的形式恢復到原來的狀態。

+2

'$(this)。get(0)'是編寫'this'的一種荒謬的方式......你*真的*不必在這裏使用jQuery':P' –

回答

13

的DOM元素具有屬性「值」,它可以通過訪問:

element.getAttribute('value'); 

...這可能是從元素的財產value不同。

Demo

請注意,您可以撥打.setAttribute('value', 'new value')這實際上會影響到被稱爲後任何form.reset()

+0

非常好 - 謝謝,這正是我想到的! –

+1

@David爲什麼'$(this).attr('value')'返回與'this.getAttribute('value')'相同的?我認爲它應該... –

+0

@RightSaidFred你的意思是這是一個錯誤?我覺得很難相信。 'attr()'方法已經存在很長時間了。現在應該刪除所有的錯誤。爲什麼attr()不能完全映射到'getAttribute()'...... –

2

HTML確實改變了。只是瀏覽器的默認視圖源工具總是向您顯示從服務器獲取的原始源代碼。如果你使用類似Firebug的東西,你將能夠看到HTML中的動態變化。

獲取初始值的一種方法是將其存儲在除「值」之外的其他屬性中。通過調用

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

您可以隨時恢復原來的值:例如,如果你成爲了你的HTML像

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

+1 - 一個有創意的解決方案,但@David Hedlund的答案就是我一直在尋找的答案! –

0
Save the original_values @ document.ready. 

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

你可以嘗試存儲數據的價值。例如:

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

然後你就可以很容易地以後這樣獲取:

console.log($('#one').data('val')); 
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); 
}); 
8

輸入元素得到了屬性調用defaultValue被存儲原始值。切換到 「兩節」,上面會返回 「一」 之後 -

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

Updated jsFiddle

要通過jQuery實現,只需要使用.prop()

+1

或者只是'this.defaultValue' ... – Brilliand