jquery - ユーザーが変更した後に（jQueryを使用して）実際の入力値を取得するにはどうすればよいですか？

Question

たとえば、value="wally"のhtml入力があります。

<input type="text" value="wally" />

ユーザーが変更した後、この古い「ウォーリー」値を（jQueryを使用して）取得するにはどうすればよいですか？

.attr（）、. prop（）、. val（）で取得しようとしましたが、すべてユーザーが入力した新しい値を返します。

jsfiddleでコードをテストできます。入力値を変更して、「取得」の青いボタンをクリックしてみてください。

PSjQuery1.7.2がjsfiddleに含まれています。

score 5 · Accepted Answer

defaultValue基礎となるDOM要素の使用：

var input = $(this).closest('form').find('input');
console.log(input[0].defaultValue);

そしてもちろん、jQuery 1.6以降を使用している場合prop('defaultValue')は、そのために使用できます（以前のバージョンでは、attr('defaultValue')おそらく機能します）。

var input = $(this).closest('form').find('input');
console.log(input.prop('defaultValue'));

score 4 · Accepted Answer

変更前の値を覚えておくため。

$('input').focusin(function(){
   $(this).data('oldValue', $(this).val());
});

そして、それを使用して取り戻します。

$('input').change(function(){
   var old = $(this).data('oldValue'); //old value
   var new = $(this).val(); //new value
})

こちらの実例をご覧ください。

score 0 · Accepted Answer

element.defaultValueを使用します; もちろん、要素は入力フィールドです。JavaScriptを使用して最初に要素を埋める場合は、新しいデータ属性を追加するだけです。

たとえば、data-defaultValue ='wallie'

score 0 · Accepted Answer

input要素のデータコンテナにデフォルト値を格納し、ユーザーが[取得]ボタンをクリックしたときにそのデータ値を更新できます（最後の値だけでなく、常にデフォルト値にアクセスしたい場合を除く）。

フィドル： http： //jsfiddle.net/DA67p/4/

score -1 · Accepted Answer

次のような別の属性を使用できます：

<input type="text" value="wally" oldVal="wally" />

そして、

input.attr('oldVal');

score -1 · Accepted Answer

この質問には十分な答えがあります。ただし、コードビハインドまたはサーバー側で古い値が必要な場合に役立つ別の回避策があります。

同じ値の非表示フィールドをページに追加します。したがって、古い値が必要な場合は、非表示フィールドの値を使用してください。これを行うと、クライアント側とサーバー側の両方で古い値が取得されます。

6 に答える 6