How can I check if a value is changed on blur event?

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.

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;
    }
})();

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
});

https://jsfiddle.net/d7yx63aj

Something like this. Using Kevin Nadsady's above suggestion of

this.value!=this.defaultValue

I use a shared CSS class on a bunch of inputs 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);
        });
    }

Even if this is an old post, I thought i'd share a way to do this with simple javascript.

The javascript portion:

<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 field in your form:

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

Similar to @Kevin Nadsady's post, the following will work in native JS functions and JQuery listener events. Within the onblur event, you can compare the value against the defaultValue:

 $(".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");
     }
 });

The idea is to have a hidden field to keep the old value and whenever the onblur event happens, check the change and update the hidden value with the current text value

string html = "<input type=text id=it" + row["cod"] + "inputDesc value='"
                    + row["desc"] + "' onblur =\"if (this.value != document.getElementById('hd" + row["cod"].ToString() + 
                    "inputHiddenDesc').value){ alert('value change'); document.getElementById('hd" + row["cod"].ToString() + 
                    "inputHiddenDesc').value = this.value; }\"> " +
                    "<input type=hidden id=hd" + row["cod"].ToString() + "inputHiddenDesc value='" + row["desc"] + "'>";