вход обнаружения изменения значения с помощью класса

Question

основе в этом вопросе:

Jquery input value change detection

я есть input 1 и input 2 с value='100'

если я изменить значение input 1, предупреждение показывает, что значение было изменение , perfet.

, но если я получу вход и потеряю фокус (я снова работаю с focusout()), предупреждение будет продолжать показывать, что значение было изменено снова, возможно, потому, что я использую класс.

Я не могу положить это на работу, чего я не хватает?

HTML:

<input type="text" value="100" class="inputTest" /> 
<input type="text" value="100" class="inputTest" /> 

ЯШ:

$(".inputTest").focusout(function(){ 
    if(this.value != this.defaultValue){ 
     alert('changed'); 
    } 
}); 

сделал live example.

Спасибо.

Answer 1

Используйте метод data() для хранения последнего значения, помещенного в input. Затем вы можете изменить свою логику, чтобы протестировать ее, а не значение по умолчанию.

$(".inputTest").each(function() { 
    $(this).data("lastValue", this.value); 
}) 

$(".inputTest").focusout(function() { 
    if (this.value != $(this).data("lastValue")) { 
     alert('changed'); 
     $(this).data("lastValue", this.value) 
    } 
}); 

Fiddle here

Answer 2

Возможно, вы должны использовать обработчик изменений вместо обработчика фокуса. Таким образом, он будет проверять значения только в том случае, если значение было изменено.

Answer 3

Вопрос заключается в том, что вы проверить value != defaultValue на focusout, это не будет, очевидно, никогда не будет верно, как только значение было изменено один раз, до тех пор, пока снова не будет изменен.

Вам необходимо проверить, есть ли this.value != this.previousValue и сохранить предыдущее значение этого поля.

EDIT: @Rory McCrossan точно описал, как это сделать в его ответе.

Answer 4

defaultValue всегда будет содержать 100. Если вы измените содержимое поля ввода, значение по умолчанию не изменится.

Рассмотрим хранение предыдущего значения:

// Initialize previousValue 
$(".inputTest").each(function() { 
    $(this).data('previousValue', this.defaultValue); 
}); 

$(".inputTest").focusout(function(){ 
    if(this.value != $(this).data('previousValue')){ 
     alert('changed'); 
     // Set previousValue again 
     $(this).data('previousValue', this.value); 
    } 
});