Ich habe heute Morgen gesucht und finde keine einfachen Lösungen ... im Grunde möchte ich eine Änderung in einem Eingabeelement erfassen, aber auch den vorherigen Wert kennen.

Hier ist ein Änderungsereignis und ein Eingabeelement in seiner einfachsten Form. Natürlich kann ich den neuen Wert mit $ (elem) .val () abrufen, aber gibt es eine hinterhältige Methode, die mir fehlt, um den vorherigen Wert abzurufen? Ich sehe in der jQuery-API nichts, um dies zu tun, aber vielleicht hat dies bereits jemand getan und hat einige Tipps?

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

Ich bin nicht dagegen, meine eigene Lösung zu schreiben, ich möchte nur sicherstellen, dass ich das Rad hier nicht neu erschaffe.

Ein besserer Ansatz besteht darin, den alten Wert mit .data zu speichern. Dies erspart die Erstellung einer globalen Variable, von der Sie sich fernhalten sollten, und hält die Informationen im Element eingekapselt. Ein Beispiel aus der Praxis, warum Global Vars schlecht sind, ist hier dokumentiert

z.B

<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">

Dies könnte den Trick tun:

$(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"));
    });
});

Demo hier

$('#element').on('change', function() {
    $(this).val($(this).prop("defaultValue"));
});

Sie können den Wert des Eingabefelds in ein verstecktes Feld kopieren lassen, wenn der Fokus das Eingabefeld verlässt (was tun soll, was Sie wollen). Siehe Code unten:

<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">

(ungetestet, aber es sollte funktionieren).

Jedes DOM-Element hat ein Attribut namens defaultValue. Sie können dies verwenden, um den Standardwert zu erhalten, wenn Sie nur die erste Änderung von Daten vergleichen möchten.

In Russ Antwort bindet er das Fokusereignis. Ich denke nicht, dass es notwendig ist.

Sie können den alten Wert im Änderungsereignis speichern.

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

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

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

Ein paar Punkte.

Verwenden Sie $ .data anstelle von $ .fn.data

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

Dann können Sie den vorherigen Wert über das Ereignisobjekt abrufen, ohne Ihr Leben zu verkomplizieren:

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

Seien Sie gewarnt, dass defaultValue NICHT der zuletzt eingestellte Wert ist. Dies ist der Wert, mit dem das Feld initialisiert wurde. Sie können jedoch $ .data verwenden, um den "alten Wert" zu verfolgen.

Ich empfehle Ihnen, das "Ereignis" -Objekt in Ihren Ereignishandlerfunktionen immer zu deklarieren und sie mit einem Firebug (console.log (Ereignis)) oder etwas anderem zu überprüfen. Dort finden Sie viele nützliche Dinge, die Sie vor dem Erstellen / Zugreifen auf JQuery-Objekte bewahren (die großartig sind, aber wenn Sie schneller sein können ...)

Ich habe diese Funktionen auf Vorschlag von Joey Guerra erstellt. Vielen Dank dafür. Ich arbeite ein bisschen daran, vielleicht kann es jemand benutzen. Die erste Funktion checkDefaults () wird aufgerufen, wenn sich eine Eingabe ändert, die zweite wird aufgerufen, wenn das Formular mit jQuery.post gesendet wird. div.updatesubmit ist meine Schaltfläche "Senden", und die Klasse "Bedarfsaktualisierung" ist ein Indikator dafür, dass eine Aktualisierung vorgenommen, aber noch nicht gesendet wurde.

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

Ich habe einen schmutzigen Trick gefunden, aber er funktioniert. Sie können die Hover-Funktion verwenden, um den Wert vor dem Ändern abzurufen.