How to Find Out Which Dom Element Has the Focus

How do I find out which DOM element has the focus?

Use document.activeElement, it is supported in all major browsers.

Previously, if you were trying to find out what form field has focus, you could not. To emulate detection within older browsers, add a "focus" event handler to all fields and record the last-focused field in a variable. Add a "blur" handler to clear the variable upon a blur event for the last-focused field.

If you need to remove the activeElement you can use blur; document.activeElement.blur(). It will change the activeElement to body.

How to determine which html page element has focus?

Use the document.activeElement property.

The document.activeElement property is supported on Chrome 2+, Firefox 3+, IE4+, Opera 9.6+ and Safari 4+.

Note that this property will only contain elements that accept keystrokes (such as form elements).

Know what element is currently focused using focus()

To achieve this you can use a delegated event handler. It will listen for the focus event on all child elements.

Note that this example is listening for the event on any form control, but that selector can be amended to target what is required in your specific use case.

$(document).on('focus', ':input', function() {  console.log(this.id);});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type="text" id="foo" /><input type="text" id="bar" /><input type="text" id="fizz" /><input type="text" id="buzz" />

Traversing DOM to find which element has focus

getElementsByTagName('a') returns an array, but you are comparing it to activeElement thus the two will NEVER be equal.

If you want to know if the activeElement is in your menu, then you can look up the parent chain of the activeElement and just see if you run into the TopMenuID element.

function doesContain(item, parent) {
    var obj = item.parentNode;
    while (obj && obj !== document.documentElement && obj.nodeType !== 11) {
        if (obj === parent) {
            return(true);
        }
        obj = obj.parentNode;
    }
    return(false);
}

if ((evt.which == arrLeftKey || evt.keyCode == arrLeftKey) && doesContain(document.activeElement, document.getElementById(TopMenuID) {
    alert("LEFT");
}

Determining which element has focus

Duplicate:

How to determine which html page element has focus?
How do I find out which Javascript element has focus?

Long story short:

Some browsers (originally only IE, but Firefox 3 and Safari jumped on the wagon) support the document.activeElement property, which achieves what you want.

For older browsers, you need this hack to emulate the property:

function _dom_trackActiveElement(evt) {
    if (evt && evt.target) { 
        document.activeElement = evt.target == document ? null : evt.target;
    }
}

function _dom_trackActiveElementLost(evt) { 
    document.activeElement = null;
}

if (!document.activeElement) {
    document.addEventListener("focus",_dom_trackActiveElement,true);
    document.addEventListener("blur",_dom_trackActiveElementLost,true);
}

How to detect what element has the focus, on touch devices

Found the solution: try to get the element by the pseudo-selector :hover, in place of :focus

Check if any element has the focus?

Loop through each element and test if has :focus.

$('.text-block').each(function() {
    if ($(this).is(':focus')) {
        console.log('This element has focus!');
    }
});

I tested this with some basic HTML inputs and it works: http://jsbin.com/aTaqagOz/1/ (the JSBin I worked on was working but the preview appears not to)

Maybe your elements aren't focusing correctly?