textbox not responding to keyup event in IE11

Description

Hi,

I have a select element and a textbox element. The textbox is wired with a keyup event handler that checks if the input is numeric using a Regex and clears any non-numeric characters. The textbox is also wired to a focus event handler to check if the value of the select element is numeric and if it's not then blur the textbox. Basically, the functionality is to enter phone numbers.

The problem is that in IE11, non-numeric characters go through whereas is Chrome and Firefox the non-numeric characters are deleted as expected. Not sure if it's a jQuery or an IE11 problem.

Similar to the original commenter's fiddle, on Chrome clicking on both input boxes, neither allow you to enter keys into them because they .blur(); on focus();. The console reads "test2" whenever you click the inputs (as expected). If you take out the .blur(); command, you can type in both inputs and "test1" is console.log'd on keyup, as expected.

In IE11, everything works the same way except when you have .blur() added in (like the fiddle starts with), you can still type in the input box ONLY on the input box whose event handlers were handled with a body.on() call, instead of assigning them directly (jquery.focus(fn)). Another note is that, as per the original ticket report, the keyup function does NOT get called when you input keys into the box.

Should each of these three have the same result? Right now, the third option does not leave a function attached to the focus event because (https://github.com/jquery/jquery/blob/master/src/event.js#L97) is changing the type to the delegate type (focusin, and blur to focusout). Is this the intended behavior for the third way of assigning event handlers?

Well the jsFiddle in v8 solves the problem of the functionality not working by changing the code but that doesn't fix the jQuery bug. In IE, the functionality as it was originally coded in the jsFiddle breaks in jQuery 1.9+ and works with older jQuery versions and in other browsers.

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

This might sound a bit of a hack but adding a setTimeout of 1ms for IE reorders the events correctly. So if the jQuery .focus() and .blur() functions could just wait 1ms before returning then that might fix this problem.

Yes, your code can do that. Our unit tests do that. jQuery cannot do that internally without pushing the problem to another location. The caller could assume that when $(elem).focus() returns the element is focused and it did whatever the event handler was supposed to do. That's why faking the focus event worked, although it had other undesirable effects, because we forced the handler to run right then and there.

The bottom line is that focus/blur is not an event to be trusted. It's async in IE and occasionally unreliable in Firefox as well. Don't create complicated scenarios with it. It will break.

It's really unfortunate because the blur and focus events are used in forms and forms are used for important tasks such as user registration or e-commerce processing.

In my particular case, the functionality in the jsFiddle is used to enter international phone numbers: if the user hasn't selected a country code from the select element then it blurs the phone number textbox to force the user to select a prefix first.

I changed my code to make it work but it would really be nice to find a more general solution from within jQuery because inevitably this problem is causing bugs in people's websites, in particular those that were built and tested before 1.9 was released, but that have since then not been maintained.

BTW, are the keyup/keydown events subject to the same unexpected behavior?