How can I check if a value is changed on blur event?
Solution 1
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.
Solution 2
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:
Solution 3
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;
}
})();
Solution 4
Why not just maintaining a custom flag on the input element?
input.addEventListener('change', () => input.hasChanged = true);
input.addEventListener('blur', () =>
{
if (!input.hasChanged) { return; }
input.hasChanged = false;
// Do your stuff
});
Solution 5
Using Jquery events we can do this logic
Step1 : Declare a variable to compare the value
var lastVal ="";
Step 2: On focus get the last value from form input
$("#validation-form :input").focus(function () {
lastVal = $(this).val();
});
Step3:On blur compare it
$("#validation-form :input").blur(function () {
if (lastVal != $(this).val())
alert("changed");
});
Related videos on Youtube
vel
Updated on July 09, 2022Comments
-
vel almost 2 years
Basically I need to check if the value is changed in a textbox on the 'blur' event so that if the value is not changed, I want to cancel the blur event.
If it possible to check it the value is changed by user on the blur event of an input HTML element?
-
dev_row about 10 years"you can't cancel a blur event". I think he means something like "if (!hasChanged) return false;"
-
Senthil almost 7 yearsGood one with out hidden fields ;)
-
arecaps about 5 yearsDont know why this is the excepted answer, this can be done, as in answers below stackoverflow.com/a/40666726/3043793
-
Pablo Souza over 4 yearsIn this case every current value will be different from defaultValue. Should not work fine
-
Sergey Kalinichenko almost 3 yearsThis approach works only once. On the second change the value would be compared to what was in the field in the very beginning, not to what was in the field immediately before the change.
-
Brian K. over 2 years@arecaps That only works if there wasn't a value in the input to begin with.