2

I want to trigger a blur within a keypress. IE10 works differently from Chrome/FF. It appears that IE will finish the keydown handler before calling the blur handler, whereas Chrome and FF will trigger the blur handler right when the blur occurs and then go back to finish the keypress handler.

I'm wondering if this is a bug and if there is a good workaround in IE to work like Chrome and FF.

See the code below.

 $(document).ready(function () {
     document.getElementById("txtInput").addEventListener('blur',
     function (event) {
         console.log('blur');
     });

     document.getElementById("txtInput").addEventListener('keydown',
     function (event) {
         console.log('down 1');
         document.getElementById("txtInput").blur();
         console.log('down 2');
     }
     );
 });

http://jsfiddle.net/244raf1u/

Output from Chrome:

down 1
blur
down 2

Output from IE

down 1
down 2
blur
Dersgniw
  • 21
  • 2

2 Answers2

0

Try this:

$(document).ready(function () {

     $("#txtInput").blur(function (event) {
         event.preventDefault();
         console.log('blur');
     });

     $("#txtInput").keypress(function (event) {
         console.log('down 1');
         $(this).blur();
         console.log('down 2');
     });

 });

Check out the changes I made in this updated fiddler here.

I had to change the way you were calling the blur() trigger, and then added a simple event.preventDefault() in the blur() handler to prevent a second firing in IE. It seems like IE was trying to move focus off of that input after running the keypress handler.

Also by using this notation: ($("#txtInput")[0]) you are actually referring to the original element object and not the jQuery object, which may be causing issues in IE where the other two are catching the error.

Hopefully this will help!

rasicoc
  • 310
  • 1
  • 10
  • Well, jQuery must be doing something behind the scenes? I'm not actually using jQuery.. was just for this example and I was using the [0] notation to actually point to the element. Here's a (mostly) non-jQuery options http://jsfiddle.net/244raf1u/ – Dersgniw May 26 '15 at 20:05
  • Well after much reading, [this post](http://helephant.com/2008/01/16/focus-event-handler-run-in-different-order-in-ie-than-firefox/) is almost exactly like what you are experiencing here only with the focus event. Unfortunately they had no real answers either. This behavior seems to be an issue with how IE handles the events vs the other browsers. – rasicoc May 27 '15 at 14:10
  • You can do similar things with generic javascript, but the code involved is much more lengthy since you have to handle different event methods based on IE vs the other browsers. I found some useful information [here](http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript), [here](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events) and [here](http://www.2ality.com/2013/06/triggering-events.html). – rasicoc May 27 '15 at 14:13
  • In my opinion though if you are going to have jQuery available I would use the library to bridge the browser gaps. – rasicoc May 27 '15 at 14:13
0

I found a couple solutions. First is to use the focusout instead of blur. Blur doesn't bubble, focusout does. Not sure why that matters, but the events are probably implemented differently. Unfortunately, that's not an option for me.

The other solution was to have two keydown handlers. The first triggers the blur and anything I want to happen before the blur. The 2nd handler does the processing after the blur, but I have to set a 50ms timeout because all keydown handling occurs before the blur handling.

Dersgniw
  • 21
  • 2