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.datastrong >
// 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
Я нашел грязный трюк, но он работает, вы можете использовать функцию зависания, чтобы получить значение перед изменением!