JQuery Измените событие на элементе <input> - каким-либо образом сохранить предыдущее значение?

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

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

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

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

Ответ 1

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

например

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

Ответ 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"));
    });
});

Демо здесь

Ответ 3

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

Ответ 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">

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

Ответ 5

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

Ответ 6

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

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

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

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

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

Ответ 7

Некоторые точки.

Использовать $.data Вместо $.fn.data​​strong >

// 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 (что отлично, но если вы можете быть быстрее...)

Ответ 8

Я создал эти функции на основе предложения Joey Guerra, спасибо за это. Я разрабатываю немного, возможно, кто-то может его использовать. Первая функция checkDefaults() вызывается при изменении входа, вторая вызывается, когда форма отправляется с использованием jQuery.post. div.updatesubmit - это моя кнопка отправки, а класс "needupdate" является индикатором того, что обновление сделано, но еще не отправлено.

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

Ответ 9

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