How can I check if a value is changed on blur event?
You can't cancel the blur event, you need to refocus in a timer. You could either set up a variable onfocus or set a hasChanged
variable on the change event. The blur event fires after the change event (unfortunately, for this situation) otherwise you could have just reset the timer in the onchange event.
I'd take an approach similar to this:
(function () {
var hasChanged;
var element = document.getElementById("myInputElement");
element.onchange = function () { hasChanged = true; }
element.onblur = function () {
if (hasChanged) {
alert("You need to change the value");
// blur event can't actually be cancelled so refocus using a timer
window.setTimeout(function () { element.focus(); }, 0);
}
hasChanged = false;
}
})();
Within the onblur
event, you can compare the value
against the defaultValue
to determine whether a change happened:
<input onblur="if(this.value!=this.defaultValue){alert('changed');}">
The defaultValue
will contain the initial value of the object, whereas the value
will contain the current value of the object after a change has been made.
References:
value vs defaultValue
I don't think there is a native way to do this. What I would do is, add a function to the focus
event that saves the current value into a variable attached to the element (element.oldValue = element.value
). You could check against that value onBLur.