6

I have an input field with an input event bound to it (via jQuery). This event should be fired everytime 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 input event should NOT be fired (the value actually doesn't change; just the placeholder disappears). It works fine in Firefox or Chrome but not in IE.

How can I avoid this behavior?

For better understanding my problem on jsfiddler

lionheart98
  • 918
  • 1
  • 10
  • 25
  • in what version of IE this happen? – Olrac Oct 10 '13 at 07:43
  • @OLRAC in IE10 running on Windows 8 – lionheart98 Oct 10 '13 at 07:48
  • so you're saying that your problem is the placeholder? – Olrac Oct 10 '13 at 07:58
  • exactly, just remove the placeholder element in my jsfiddler example and you'll see that everything works as expcedted – lionheart98 Oct 10 '13 at 08:02
  • your jsfiddle is working like a charm to my newly downloaded ie10..maybe you need to update your ie 10.. – Olrac Oct 14 '13 at 01:42
  • seriously? I just updated IE to v10.0.10. It's still not working properly. Just to ensure that you get me right: my problem is that IE fires the input event even if the user just enters the input field (and hasn't typed anything). Does the "0" appear if you just click into the input field but haven't typed anything? – lionheart98 Oct 14 '13 at 07:04
  • ok..i saw it now..why you dont want to display 0 on the first input..? – Olrac Oct 14 '13 at 07:26
  • 1
    http://stackoverflow.com/questions/574941/best-way-to-track-onchange-as-you-type-in-input-type-text -i think this link will help you.. – Olrac Oct 14 '13 at 07:54
  • thank you for your reply! unfortunately the keyup/press, change, paste and cut events aren't as powerful as the input event (i.e. they all don't recognize undo/redo events; input does). However, do you know any smarter way to bind these events based on the browser despite of using the user agent? – lionheart98 Oct 14 '13 at 09:56
  • btw. why don't I want to display 0: this is just a simple example of my problem. I currently use the input event to validate an input form and check if it's empty. So it's not beautiful if error msgs appear just because the user entered the input filed but didn't make any changes to its actual value. – lionheart98 Oct 14 '13 at 10:02
  • 1
    It's an IE 10/11 bug: https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus – Ian Kemp Oct 15 '15 at 14:06

2 Answers2

2

One way to guard against the problem is by storing the old value of your field and checking against it before performing the real function you want to perform in your input handler. This is how I fixed it in one of my applications.

For instance:

$(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 acting when the field is not changing.

Louis
  • 146,715
  • 28
  • 274
  • 320
  • How to guard against that input event prevents other events? I have a link with click biding which is being stopped by this input event :( Users complaining that they have to click two times in IE while it works ok in other browsers. – Azimuth Sep 02 '16 at 10:06
  • @Azimuth I've never had a problem with clicks being ignored. What the code in the answer does is only listening to `input` events, and this has no effect on how `click` events are handled. Sounds like you may have material for a new question. – Louis Sep 02 '16 at 10:18
  • @Louis yepp, I will create a question – Azimuth Sep 02 '16 at 12:25
-1

try adding this to the input event:

if($(this).val() == $(this).get(0).defaultValue) return;
MoLow
  • 3,056
  • 2
  • 21
  • 41