jQuery Zmień wydarzenie na element <input> - jakikolwiek sposób na zachowanie poprzedniej wartości?

Question

Szukałem dziś rano i nie znajduję żadnych prostych rozwiązań ... w zasadzie chcę uchwycić zmianę w elemencie wejściowym, ale także znać poprzednią wartość.

Oto zdarzenie zmiany i element wejściowy w najprostszej postaci. Oczywiście, mogę uzyskać nową wartość za pomocą $ (elem) .val(), ale czy istnieje podstępna metoda, której mi brakuje do uzyskania poprzedniej wartości? Nie widzę w tym nic w API jQuery, ale może ktoś już to zrobił i ma kilka wskazówek?

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

Nie jestem przeciwny pisaniu własnego rozwiązania, chcę tylko upewnić się, że nie odtwarzam tutaj koła.

Answer 1

Lepszym rozwiązaniem jest przechowywanie starej wartości za pomocą .data. Zapobiega to tworzeniu globalnego var, którego należy unikać i zachowuje informacje zawarte w elemencie. Prawdziwy przykład świat, dlaczego globalne Vars są złe jest udokumentowana here

np

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

Answer 2

Możesz mieć wartość pola wejściowego skopiowanego do ukrytego pola, gdy fokus opuszcza pole wejściowe (które powinno zrobić to, co chcesz). Zobacz kod poniżej:

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

(untested, ale powinno działać).

Answer 3

W odpowiedzi Russ wiąże on fokus. Nie uważam tego za konieczne.

Możesz zachować starą wartość w zdarzeniu zmiany.

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

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

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

Answer 4

elementem Każdy DOM posiada atrybut o nazwie defaultValue. Możesz użyć tego, aby uzyskać wartość domyślną, jeśli chcesz porównać pierwszą zmianę danych.

Answer 5

Kilka punktów.

Zastosowanie $ .data Zamiast $ .fn.data

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

Następnie można uzyskać poprzednią wartość przez obiekt zdarzenia, bez komplikowania swoje życie:

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

Be ostrzegł, że defaultValue NIE jest ostatnią ustawioną wartością. Jest to wartość, z którą zainicjowano pole. Ale możesz użyć $ .data do śledzenia "starej wartości"

Polecam zawsze zadeklarować obiekt "event" w funkcjach obsługi zdarzeń i sprawdzić je za pomocą firebug (console.log (event)) lub coś podobnego. Znajdziesz tam wiele przydatnych rzeczy, które pozwolą ci zaoszczędzić od tworzenia/uzyskiwania dostępu do obiektów jQuery (które są świetne, ale jeśli możesz być szybszy ...)

Answer 6

Może to rade:

$(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 here

Answer 7

znalazłem świństwo, ale to działa, można użyć funkcji aktywowanych uzyskać wartość przed zmianą!

Answer 8

Te funkcje stworzyłem w oparciu o sugestię Joey'a Guerry, dziękuję za to. Trochę się rozwijam, może ktoś może z tego skorzystać. Pierwsza funkcja checkDefaults() jest wywoływana, gdy dane wejściowe ulegają zmianie, druga funkcja jest wywoływana, gdy formularz jest wysyłany za pomocą jQuery.post. div.updatesubmit to mój przycisk przesyłania, a klasa "needsupdate" jest wskaźnikiem, że aktualizacja została wprowadzona, ale jeszcze nie została przesłana.

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

Answer 9

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