Я шукав сьогодні вранці і не знайшов простих рішень ... по суті, я хочу зафіксувати зміну вхідного елемента, але також знати попереднє значення.

Ось подія зміни та елемент введення в найпростішій формі. Зрозуміло, що я можу отримати нове значення за допомогою $ (elem) .val (), але чи є підлий метод, який мені не вистачає для отримання попереднього значення? Я не бачу нічого в jQuery API для цього, але, можливо, хтось це вже зробив і має кілька порад?

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

Я не проти написання власного рішення, я просто хочу переконатись, що не відтворюю тут колесо.

Кращий підхід - зберігати старе значення за допомогою .data. Це позбавляє від створення глобальної змінної, від якої слід триматися подалі, і зберігає інформацію, інкапсульовану всередині елемента. Реальний приклад світу, чому Global Варс погано документована тут

напр

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

Це може зробити трюк:

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

Демо тут

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

Ви можете скопіювати значення поля введення у приховане поле кожного разу, коли фокус залишає поле введення (яке має робити те, що ви хочете). Дивіться код нижче:

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

(не перевірено, але це має спрацювати).

Кожен елемент DOM має атрибут, який називається defaultValue. Ви можете використовувати це, щоб отримати значення за замовчуванням, якщо ви просто хочете порівняти першу зміну даних.

У відповіді Русса він пов’язує основну подію. Я не думаю, що це потрібно.

Ви можете зберегти старе значення у події зміни.

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

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

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

Деякі моменти.

Використовуйте $ .data замість $ .fn.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"

Я рекомендую вам завжди оголошувати об'єкт "event" у своїх функціях обробника подій та перевіряти їх за допомогою firebug (console.log (event)) або чогось іншого. Ви знайдете там багато корисного, що позбавить вас від створення / доступу до об'єктів jquery (що чудово, але якщо ви можете бути швидшими ...)

Я створив ці функції на основі пропозиції Джої Герри, дякую за це. Я трохи розробляю, можливо, хтось може цим скористатися. Перша функція checkDefaults () викликається при зміні вводу, друга викликається, коли форма подається за допомогою 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");
}

Я знайшов брудний трюк, але він працює, ви можете використовувати функцію наведення, щоб отримати значення перед зміною!