web-dev-qa-db-ja.com

<input>要素のjQuery Changeイベント-以前の値を保持する方法はありますか？

私は今朝探していて、簡単な解決策を見つけていません...基本的に、入力要素の変更をキャプチャしたいのですが、以前の値も知っています。

変更イベントと最も単純な形式の入力要素を次に示します。明らかに、$（elem）.val（）を使用して新しい値を取得できますが、以前の値を取得するために抜けている卑劣なメソッドはありますか？ jQuery APIにはこれを行うものは何もありませんが、誰かが既にこれを行っており、いくつかのヒントがありますか？

<script>
    $(document).ready(function(){
        $('#myInputElement').bind('change', function(){
            //var oldvalue = ???
            var newvalue = $(this).val();
        });
    });
</script>
<input id="myInputElement" type="text">

私は自分のソリューションを書くことに反対しているのではなく、ここでホイールを再作成しないようにしたいだけです。

javascriptjqueryhtmleventsforms
75
SeanW

より良い方法は、.dataを使用して古い値を保存することです。これにより、グローバル変数を作成せずに済み、情報を要素内にカプセル化しておくことができます。グローバル変数が悪い理由に関する実世界の例が文書化されています ここ

例えば

<script>
    //look no global needed:)

    $(document).ready(function(){
        // Get the initial value
       var $el = $('#myInputElement');
       $el.data('oldVal',  $el.val() );


       $el.change(function(){
            //store new value
            var $this = $(this);
            var newValue = $this.data('newVal', $this.val());
       })
       .focus(function(){
            // Get the value when input gains focus
            var oldValue = $(this).data('oldVal');
       });
    });
</script>
<input id="myInputElement" type="text">
104
redsquare

これはトリックをするかもしれません：

$(document).ready(function() {
    $("input[type=text]").change(function() {
        $(this).data("old", $(this).data("new") || "");
        $(this).data("new", $(this).val());
        console.log($(this).data("old"));
        console.log($(this).data("new"));
    });
});

ここでデモ

16
Salman A
$('#element').on('change', function() {
    $(this).val($(this).prop("defaultValue"));
});
9
Hakadel

フォーカスが入力フィールドを離れるたびに、入力フィールドの値を非表示フィールドにコピーすることができます（これにより、必要な処理が行われます）。以下のコードを参照してください：

<script>
    $(document).ready(function(){
        $('#myInputElement').bind('change', function(){
            var newvalue = $(this).val();
        });
        $('#myInputElement').blur(function(){
            $('#myHiddenInput').val($(this).val());
        });
    });
</script>
<input id="myInputElement" type="text">

（テストされていませんが、動作するはずです）。

4
inkedmn

すべてのDOM要素には、defaultValueという属性があります。最初に変更されたデータを比較するだけの場合は、これを使用してデフォルト値を取得できます。

2
Joey Guerra

ラスの答えでは、彼はフォーカスイベントをバインドします。私はそれが必要だとは思わない。

変更イベントに古い値を保存できます。

<script>
    $(document).ready(function(){

        var newValue = $('#myInputElement').val();
        var oldValue;

        $('#myInputElement').change(function(){
            oldValue = newValue;
            newValue = $(this).val();
        });
    });
</script>
<input id="myInputElement" type="text">
1
Daniel Moura

Joey Guerraの提案に基づいてこれらの関数を作成しました。ありがとうございます。私は少し詳しく説明していますが、おそらく誰かがそれを使用できるでしょう。最初の関数checkDefaults（）は入力が変更されると呼び出され、2番目はjQuery.postを使用してフォームが送信されると呼び出されます。 div.updatesubmitは送信ボタンであり、クラス「needsupdate」は更新が行われたがまだ送信されていないことを示すインジケーターです。

function checkDefaults() {
    var changed = false;
        jQuery('input').each(function(){
            if(this.defaultValue != this.value) {
                changed = true;
            }
        });
        if(changed === true) {
            jQuery('div.updatesubmit').addClass("needsupdate");
        } else {
            jQuery('div.updatesubmit').removeClass("needsupdate");
        }
}

function renewDefaults() {
        jQuery('input').each(function(){
            this.defaultValue = this.value;
        });
        jQuery('div.updatesubmit').removeClass("needsupdate");
}
1
Maarten van Middelaar

いくつかのポイント。

$。fn.dataの代わりに$ .dataを使用

// regular
$(elem).data(key,value);
// 10x faster
$.data(elem,key,value);

それから、あなたはあなたの人生を複雑にすることなく、イベントオブジェクトを通して以前の値を得ることができます：

    $('#myInputElement').change(function(event){
        var defaultValue = event.target.defaultValue;
        var newValue = event.target.value;
    });

DefaultValueは最後に設定された値ではないことに注意してください。フィールドが初期化された値です。ただし、$。dataを使用して「oldValue」を追跡できます

イベントハンドラー関数で常に「イベント」オブジェクトを宣言し、firebug（console.log（event））などで検査することをお勧めします。そこには、jqueryオブジェクトの作成/アクセスから節約できる多くの便利なものがあります（これは素晴らしいですが、もっと速くできれば...）

1
monzonj

汚いトリックを見つけましたが、機能します。変更前にホバー関数を使用して値を取得できます。

0
Andrea Cammoranesi