Question

I started using $('#myInput').bind('input', function() { but this does not work in IE.

What is the best cross-browser solution to detect any change to a text input field, including if the user copy and pastes into the field?

Answer 1

Intevals.

They are ugly. Unnecessary. Hated by virtually everyone. But one of the few and by far the most resilient way of testing for user input on IE.

Reasons:

• .on('input', function(){}) isn’t supported in IE<9, and is buggy in IE9-10 – it doesn’t fire when characters are deleted.
• keyup is far from perfect, you can paste from right-click menu and toolbar.
• The paste event is well supported since IE6 as far as I remember, but then keyboard input and pasting aren’t the only ways of inputting values. You can select, drag and drop text in an input too. This is one of the reasons why intervals are preferred when implementing IE support.

In IE you can also have onpropertychange as a fallback, but then it will fire whenever an object property changes, forcing you to do similar “value changed” validation as you would with an Interval. Thus I’d rather write a single interval that works in all browsers than writing a code for all browsers and another for IE.

So my suggested solutions are:

1. Use an interval as follows:

   $(function() {
       var input = $('#foo'); //change this selector to your input
       function checkchange() {
           var v = input.val();
           if (input.data('v') === v) return;
           input.data('v', v);
           //do stuff
       }
       input.data('v', input.val());
       setInterval(checkchange, 100);
   });
   

Fiddle

Or 2. Put GCF on a modal and hide the X button, therefore forcing IE users to install it and you’ll never have to write IE-specific code again – I do this whenever I can! Then again, my target audience usually doesn’t include IE users.