How to check if a value has changed in a blur event?

Question

Essentially, I need to check if the value in the text box of the blur event changes so that if the value does not change, I cancel the blur event.

If it is possible to verify, is this value changed by the user on the blur event of the input HTML element?

Answer 1

I don’t think there is a personal way to do this. What would I do, add a function to the focus event, which stores the current value in a variable attached to the element ( element.oldValue = element.value ). You can check this onBLur value.

Answer 2

You cannot cancel the blur event, you need to refocus the timer. You can either configure the onfocus variable or set the hasChanged variable in the change event. The blur event fires after the change event (unfortunately for this situation), otherwise you could just reset the timer in the onchange event.

I would take an approach like 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; } })(); 

Answer 3

In the onblur event onblur you can compare value with defaultValue to determine if a change has occurred:

 <input onblur="if(this.value!=this.defaultValue){alert('changed');}"> 

defaultValue will contain the initial value of the object, while value will contain the current value of the object after making changes.

Literature:

value vs defaultValue

Answer 4

Using jQuery events, we can do this logic

Step1: declare a variable to compare the value

 var lastVal =""; 

Step 2: In focus, get the last value from the form input

  $("#validation-form :input").focus(function () { lastVal = $(this).val(); }); 

Step 3: compare it by blur

 $("#validation-form :input").blur(function () { if (lastVal != $(this).val()) alert("changed"); }); 

Answer 5

You can use this code:

 var Old_Val; var Input_Field = $('#input'); Input_Field.focus(function(){ Old_Val = Input_Field.val(); }); Input_Field.blur(function(){ var new_input_val = Input_Field.val(); if (new_input_val != Old_Val){ // execute you code here } }); 

Answer 6

I know this is old, but I thought I would put it in case someone wants alternatives. This seems ugly (at least for me), but in order to deal with how the browser handles the -1 index, this is a problem. Yes, I know this can be done better with jquery.data, but I am not familiar with this yet.

Here is the HTML code:

 <select id="selected"> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> </select> 

Here is the javascript code:

 var currentIndex; // set up a global variable for current value $('#selected').on( { "focus": function() { // when the select is clicked on currentIndex = $('#selected').val(); // grab the current selected option and store it $('#selected').val(-1); // set the select to nothing } , "change": function() { // when the select is changed choice = $('#selected').val(); // grab what (if anything) was selected this.blur(); // take focus away from the select //alert(currentIndex); //setTimeout(function() { alert(choice); }, 0); } , "blur": function() { // when the focus is taken from the select (handles when something is changed or not) //alert(currentIndex); //alert($('#selected').val()); if ($('#selected').val() == null) { // if nothing has changed (because it is still set to the -1 value, or null) $('#selected').val(currentIndex); // set the value back to what it originally was (otherwise it will stay at what was newly selected) } else { // if anything has changed, even if it the same one as before if ($('#selected').val() == 2) { // in case you want to do something when a certain option is selected (in my case, option B, or value 2) alert('I would do something'); } } } }); 

Answer 7

Something like that. Using Kevin Nadsadi above sentence

this.value! = this.defaultValue

I use a common CSS class for multiple inputs and then do:

  for (var i = 0; i < myInputs.length; i++) { myInputs[i].addEventListener('blur', function (evt) { if(this.value!=this.defaultValue){ //value was changed now do your thing } }); myInputs[i].addEventListener('focus', function (evt) { evt.target.setAttribute("value",evt.target.value); }); } 

Answer 8

Even if this is an old post, I thought that I would share a way to do it using simple JavaScript.

JavaScript part:

 <script type="text/javascript"> function HideLabel(txtField){ if(txtField.name=='YOURBOXNAME'){ if(txtField.value=='YOURBOXNAME') txtField.value = ''; else txtField.select(); } } function ShowLabel(YOURBOXNAME){ if(txtField.name=='YOURBOXNAME'){ if(txtField.value.trim()=='') txtField.value = 'YOURDEFAULTVALUE'; } } </script> 

Now the text box in your form:

 <input type="text" id="input" name="YOURBOXNAME" value="1" onfocus="HideLabel(this)" onblur="ShowLabel(this)"> 

And bewn! No need jquery. just plain javascript to cut and paste those bad guys. (don't forget to put your javascript above the body in HTML)

Answer 9

As with the @Kevin Nadsady post, the following will work in JS native functions and JQuery listener events. In the onblur event, you can compare the value with the defaultValue value:

  $(".saveOnChange").on("blur", function () { if (this.value != this.defaultValue) { //Set the default value to the new value this.defaultValue = this.value; //todo: save changes alert("changed"); } }); 

Answer 10

Why not just maintain your own flag on the input element?

 input.addEventListener('change', () => input.hasChanged = true); input.addEventListener('blur', () => { if (!input.hasChanged) { return; } input.hasChanged = false; // Do your stuff }); 

https://jsfiddle.net/d7yx63aj