Prevent blurring in the second element when reorienting the element from the blur event (IE8 only)

Question

I have two text fields, both have blur events handled through jQuery. When the text field is blurry, some checking occurs, and if the check is not performed, the text field is reoriented (a terrible idea, I know, but in this case this is the desired behavior).

In chrome, if you focus the first text field, then try to focus the second, you will see that this order of events occurs:

• focus shot from text1
• blur fired from text1
• focus shot from text1

In IE8, however, you will see the following:

• LOG: focus activated from text1
• LOG: blur from text1
• LOG: focus activated from text1
• LOG: focus fired from text2
• LOG: blur from text2
• LOG: focus activated from text1

I need to be able to prevent the focus and blurring of events from turning on the second text field in case of a reorientation of the first text field.

Here is a fiddle demonstrating the problem. Behavior occurs only in IE8.

Additional information: all these event handlers are tied to separate private areas, so in two text windows there is no (what I know) interaction with other functions of the handler.

Answer 1

Although I don't like having a global state, it seems that you cannot convince IE8 not to trigger another blur event in the second text field, so you have to get around it. Since the blur event on the first text field is dispatched before the second is focused, you can:

• check if the check is complete, and if so, mark in the global variable that you are currently checking textarea1
• in focus / blur, if there is another element that is checked instead of the current one, just ignore the event and return
• if validation is successful, remove the current validator from the global variable

This is a hack, but when working with buggy browsers you should use some hacks ...