JQuery input event fired at placeholder in IE

Question

I have an input field with an event inputassociated with it (via jQuery). This event should be fired whenever the input value changes. I added a placeholder to tell the user what this input field is for.

If the user clicks on this input field, the event inputshould NOT be fired (the value does not actually change, just the placeholder disappears). It works fine in Firefox or Chrome, but not in IE.

How can I avoid this behavior?

To better understand my problem on jsfiddler

Answer 1

One way to protect against the problem is to save the old field value and check it before executing the real function that you want to execute in your handler input. This is how I fixed it in one of my applications.

For example:

$(document).ready(function () {
    var $input = $("#input");
    var $msg = $("#msg");
    var old_value = $input.val();
    $input.on("input", function () {
        var new_value = $input.val();
        if (new_value !== old_value) {
            // The actual work we want to perform when the field *really* changes.
            $msg.text(new_value.length);
            old_value = new_value;
        }
    });
});

This prevents the action when the field does not change.

Answer 2

try adding this to the input event:

if($(this).val() == $(this).get(0).defaultValue) return;