событие изменения jQuery на элементе-любой способ сохранить Предыдущее значение?

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

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

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

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

9 74
javascript forms html jquery events

9 ответов:

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

Эл.г

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

Это может сделать трюк:

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

демо здесь

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

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

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

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

4

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

2

в ответе Russ он связывает событие focus. Я не думаю, что это необходимо.

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

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

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

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

некоторые моменты.

используйте $.данные вместо $.сноска.данные

// 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 не является последним установленным значением. Это значение, с которым поле было инициализировано. Но вы можете использовать $.данные для отслеживания "oldValue"

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

1

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

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

0