How to determine which element getting focus in ie 11

Question

I want to focusout event in (Chrome, Ie 6-10) or in blur event in Firefox know which elements is going to get focus. In the chrome and IE before 11 it is possible using below code:

$(input).focusout(function (event) {
            "use strict";
            console.log("next focused element: ", event.relatedTarget);
        });

In Firefox it is possible using the below code:

$(input).blur(function (event) {
            "use strict";
             console.log("next focused element:",  event.originalEvent.explicitOriginalTarget);
            });

The problem is IE 11. I can not find any way to do that in IE 11. Somebody who has found a solution for this?

Here is fiddle for testing with ie11. http://jsfiddle.net/govanm/y87sekzd/5/

Alvaro Montoro · Accepted Answer

I could see the issue on the JSFiddle that you shared in the comments, and I was able to come up with a workaround solution.

The idea of this workaround is that before the focusout happens, some select/focus event triggers in the target element. So we can keep track of that by using some auxiliary variable:

var nextElement = null;

$("input").on("select click mousedown pointerdown mspointerdown", function() {
    nextElement = this;
});

I used different events that will be triggered when an element is selected (using the mouse or the keyboard) and that happen before the focusout event.

Now that we have the nextElement, on the focusout event of the current element, we'll check the value of event.relatedTarget. If it's not null (all but IE11), we'll use it; if it's null (IE11), we'll use the nextElement variable instead:

var nextFocus =  event.relatedTarget ? event.relatedTarget : nextElement;

$("#p1").append("next focused element: " + nextFocus.id + "");

That way we won't affect the behavior on the other browsers, and it will work once IE11 fixes the know bug that you shared in the comments.

The whole code would look like this:

var nextElement = null;

$("input").on("select click mousedown pointerdown mspointerdown", function() {
  nextElement = this;
});

$("input").focusout(function (event) {

  "use strict";

  var nextFocus =  event.relatedTarget ? event.relatedTarget : nextElement;

  $("#p1").append("next focused element: " + nextFocus.id + "");

});



    
    
    
        
            * Last name:
            
        
        
            
                
                
            
        
        
    
    
        
            * First name:
            
        
        
            
                
                
            
        
        
    
    
        
            Title:
            
        
        
            
                
            
        
        
    
    
        
            * Phone:
        
        
            
                
                
            
        
        
    
    
        
            Alt. phone:
        
        
            
                
                
            
        
        
    
    
        
            * E-mail:
        
        
            
                
                
            
        
        
    
    
        
            Sales channel:
            
        
        
            
                
            
        
        
    
    
        
            Sales responsible segment:
            
        
        
            
                
            
        
        
    
    
        
            Sales team:
            
        
        
            
                
                
            
        
        
    
    

 Test

And you can see it on this JSFiddle: http://jsfiddle.net/y87sekzd/7/

How to determine which element getting focus in ie 11

Answers (1)

Related Questions