JavaScript FocusOut - get the element that receives focus

Question

When the FocusOut event is raised, how do you know which element receives the focus?

The correct way seems to be to use the event's relatedTarget property. However, this seems not to work in all browsers:

in Google Chrome, it works
in Firefox and Internet Explorer, the relatedTarget is null
in Safari, the relatedTarget property doesn't even exist

I have found a workaround which works only in IE (using document.activeElement), but I'm wondering if there isn't a general solution that has proven to work in all major browsers.

Although I can find similar questions and answers, I haven't found any solution which really works in all browsers.

EDIT: the example below shows what I mean.

Code:

document.getElementById('text1').addEventListener('focusout', function(e) {
  // At this point, I want to know which element is receiving the focus (i.e. text2)
  console.log(e.relatedTarget); // works in Chrome
  console.log(document.activeElement); // works in IE
  // both do not work in Firefox or Safari
});

<input id="text1" type="text" value="first" />
<input id="text2" type="text" value="second" />

score 6 · Accepted Answer · answered May 19 '14 at 20:59

6

I have a hypothesis and workaround for firefox. document.activeElement seems to work. Then focusout hits, so it gets removed. By the time focusin hits (or maybe immediately after) there will be a focused element again. But between out and in there is nothing focused, so no element is being reported as active.

My workaround is a stupid setTimeout hack. setTimeout( function() {console.log(document.activeElement)}, 1); reliably gets me an active element. Granted I've only tested in one machine and spent all of 90 seconds doing so, but it's the best I've found so far.

answered May 19 '14 at 20:59

valadil

1,648
1
14
30

Yeah, it is kind of a trick... But it seems to work in all major browsers! – Peter M. May 20 '14 at 13:33
1

As far as I can tell, this will only work if the element loses focus to another element that can receive keystrokes (e.g. input, textarea). For anything else, document.activeElement == document.body. https://developer.mozilla.org/en-US/docs/Web/API/document.activeElement – HNL Jul 20 '14 at 10:04

score 0 · Answer 2 · answered Apr 05 '14 at 10:42

0

I believe what you're looking for is document.activeElement.

Returns the currently focused element, that is, the element that will get keystroke events if the user types any. This attribute is read only.

https://developer.mozilla.org/en-US/docs/Web/API/document.activeElement

answered Apr 05 '14 at 10:42

Ayman Safadi

11,502
1
27
41

6

That would seem logical, but within the FocusOut event handler, this returns the Body element in some browsers (even when the actual focus switches from one input element to the next). – Peter M. Apr 05 '14 at 10:46
Also, I just noticed that you've already tried `document.activeElement`. Completely missed that. – Ayman Safadi Apr 05 '14 at 10:50
Well, not really. My specific situation is that I want to know when a DIV containing other elements loses its focus. I'd like to use the DIV's FocusOut event and check whether the element receiving the focus is another element within this DIV. But apart from the specific problem, I'm just curious if there isn't a cross-browser solution for such a simple problem. – Peter M. Apr 05 '14 at 10:51
Ah... then maybe a fiddle with an example would help. – Ayman Safadi Apr 05 '14 at 10:54
On that note, for what its worth, this [fiddle](http://jsfiddle.net/SZ3YL/) works consistently in Chrome, Firefox, Safari, IE, and Opera. – Ayman Safadi Apr 05 '14 at 10:55
See this example: [link](http://jsfiddle.net/DYnvR/2/) Just click on the first textbox and press Tab. Both solutions don't work in Firefox or Safari. – Peter M. Apr 05 '14 at 11:07

score 0 · Answer 3 · edited Sep 10 '18 at 16:35

0

//attach a focus out handler
$("#id").focusOut($El_FocusOut);

//display the id of new element being focused onto
function $El_FocusOut($eventArgs){
    //firefox specific focusout active element logi
    var activeElement = $eventArgs.originalEvent.explicitOriginalTarget;
    alert($(activeElement).attr("id"))
}

edited Sep 10 '18 at 16:35

danronmoon

3,814
5
34
56

answered Sep 02 '15 at 20:47

noremacmada

11
2

score 0 · Answer 4 · answered Jul 11 '17 at 09:53

I have encounter the same problem using textEditor PrimeFaces element.

I use the following html code.

<div contenteditable="true" class="div-focus"> 
    <h:outputText
        styleClass="OutputField" 
        value="#{oController.panelTpl.getComment()}"  
        escape="false"
        />
</div>    
<div class="text-editor"> 
    <p:textEditor 
       value="#{oController.panelTpl.txtComment.text}"
       />
</div>

The TextArea is defined twice so that when form is displayed, the user see only the first <div> widget without seeing a specific toolbar.

When user click on text displayed, the focusin() event hide the <div class="div-focus"> element and display the <p:textEditor> widget contained in <div class="text-editor"> parent element.

To do that, I have defined the following javascript code

function onLoadDialog()
    {
    jQuery(".text-editor").hide();

    jQuery(".div-focus").focusin(function()
        {
        $(this).hide();
        $(this).next(".text-editor").show();
        $(this).next(".text-editor").focus();
        });            

    jQuery(".text-editor").focusout(function(e)
        {
        if ($(e.relatedTarget).closest(".text-editor").size() == 0)
            {
            $(this).hide();
            $(this).prev(".div-focus").show();
            $(this).prev(".div-focus").text($(this).text());
            }
        });            
    }

The onLoadDialog function() is called when page is loaded and is used to hide <div class="text-editor> element and to defined focusin() and focusout() events.

The focusin() event hide <div class="div-focus"> element and display <div class="text-editor"> element. When the user clicks on text in <div class="div-focus"> element, this element is hidden and the following hidden element is display. The <div class="text-editor"> element gains focus.

The focusout() event hide <div class="text-editor"> element and display <div class="div-focus"> element ... only when element that gains focus is not defines in <div class="text-editor"> element.

The problem with element.focusout() is that it is triggered each time an element included in main element even if element that gains focus is defined in same element.

When you enter in a house, you can enter passing by garage or living room or kitchen. When you enter in living room (by external door), you enter in the building. But when you quit living room to kitchen, you stay in house !!! If you quit living room to go in garden, you quit the house (building).

focusin() function implement the same principe, but not focusout() !

if ($(e.relatedTarget).closest(".text-editor").size() == 0) line used in focusout() event correct this little difference !

CAUTION: the solution is not perfect because I have some little problems to solve when copying text from textEditor widget to outputText widget without formatting !

JavaScript FocusOut - get the element that receives focus

4 Answers4

Linked