onchange of javascript filled in field issue

Question

I want to use onchange() event on a text field that may be filled in by a date picker using javascript. i tried to use onblur(), onmouseover() and etc but non of them can help me to catch its value just after changing by date picker. a part of code that defined date picker and fill in text field is like below:

<script type="text/javascript" src="Scripts/cal_.js"></script>
<input type="text" name="receive_date" id="receive_date" style="width:75px" class="cdate" value="" {{attributes}}>
<script type="text/javascript">
    new LCalendar('receive_date');
</script>

but when I want to add onchange="_do_something()" in place of {{attributes}} it does not work.

Answer 1

Thanks for good answers. After testing so many solutions i changed my calendar library code. Just after filling in date (text) field in code:

receive_date_field.value=...;

I tried to put:

a.focus();
a.blur();

twice and for catching its value after every filling in (either by another javascript code) i used:

onfocus="_do_something();"

in place of {{attributes}} !!! as you see this is not what i want but just is a temporary way to catch value of field after every filling in.

Answer 2

The text input is don't have change event. the event you can use to get the input change is to use 'input'. see sample

inputVar.addEventListener('input', function(){'what you want to do.'});

Answer 3

This is simplistic, but you could try this:

var val;

document.getElementById('receive_date').addEventListener('focus', function() {
    // set the value
    val = this.value;
});

document.getElementById('receive_date').addEventListener('blur', function() {
    if (this.value !== val) {
        // val was changed
    } else {
        // val was not changed
    }
});