Событие jQuery Change для элемента <input>- есть ли способ сохранить предыдущее значение?

Question

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

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

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

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

Answer 1

Лучшим подходом является сохранение старого значения с использованием .data. Это избавляет от создания глобальной переменной, от которой следует держаться подальше, и сохраняет информацию в элементе. Реальный пример того, почему Global Vars плохи, задокументирован здесь

* 1005 например *

<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

Это может помочь:

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

Демо здесь

Answer 3

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

Answer 4

Вы можете скопировать значение поля ввода в скрытое поле всякий раз, когда фокус покидает поле ввода (что должно делать то, что вы хотите). Смотрите код ниже:

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

(не проверено, но должно работать).

Answer 5

Каждый элемент DOM имеет атрибут с именем defaultValue. Вы можете использовать это, чтобы получить значение по умолчанию, если вы просто хотите сравнить первое изменение данных.

Answer 6

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

Answer 7

Некоторые баллы.

Используйте $ .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"

Я рекомендую вам всегда объявлять объект «событие» в функциях вашего обработчика событий и проверять их с помощью firebug (console.log (event)) или чего-то еще Там вы найдете много полезных вещей, которые избавят вас от создания / доступа к объектам jquery (что здорово, но если вы можете быть быстрее ...)

Answer 8

В ответе Руси он связывает фокус с событием. Я не думаю, что это необходимо.

Вы можете сохранить старое значение в событии изменения.

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

Я нашел подвох, но он работает, вы можете использовать функцию наведения, чтобы получить значение до изменения!