How to Detect if an Element is Active using JavaScript?

To detect if an element is active or not, you can use the activeElement property of the Document interface. The document.activeElement property is a read-only property and it returns the element that is currently in focus.

If there is no focused element, the activeElement property returns null.

Let’s try to understand it with the help of an example.

Suppose, we have two input elements and a textarea in our HTML document to collect the user’s first name, last name and address.

We have assigned a unique id to each field so that we can get the id of that element which is currently active/focused. To show the id of the currently focused element, we have also added a span in our HTML.

<div>
    <input type="text" id="firstName" placeholder="Enter first name" autocomplete="off">
    <input type="text" id="lastName" placeholder="Enter last name" autocomplete="off"> 
    <textarea id="address"></textarea>

    <p>The active element's id is: <span id="activeId"></span></p>
    
</div>

Now, inside our JS file, we have to add an event listener to the document using the addEventListener() method which will listen to the mouseup event.

The addEventListener() method will get fired every time the user focuses on an element using his mouse pointer. It will then call a callback function where we have put the code to get the currently active element’s id.

So, to check if any specific element is currently active or not, you can compare its id with the id returned by the document.activeElement.id property.

// Get the span element
let activeId = document.getElementById('activeId');

// Listen to the mouseup event
document.addEventListener('mouseup', function(event){

    let activeElementId = document.activeElement.id;  // get focused element's id
    activeId.innerText = activeElementId;  // update text of the span

});

After running the above code, you will get the following output:

Note: The above solution will only work if the user focuses on an element using his mouse pointer. But, if the user uses the TAB key to focus on the element, it will not work.

In that case, we have to add one more event listener which will fire as soon as the user releases a key. Inside that event listener, we will filter only the TAB key presses.

To check if the key pressed is a TAB key, we can use the event.key property. The event.key property returns the name of the key pressed as a string.

Below is the enhanced version of the above code:

// Get the span element
let activeId = document.getElementById('activeId');

// Function to get focused element's Id
function getActiveElementId(){
    let activeElementId = document.activeElement.id;  // get focused element's id
    activeId.innerText = activeElementId;  // update text of the span
}

// Listen to the mouseup event
document.addEventListener('mouseup', getActiveElementId);

// Listen to the keyup event
document.addEventListener('keyup', function(event){

    // check if key pressed is a TAB key
    if(event.key=='Tab'){
        getActiveElementId();  // call the function
    }

});

Here is the outcome of the above program:

As you can see from the above output, the updated code is now working on TAB key press as well as with the mouse pointer.

Conclusion

In this article, we learned how we can detect if an element is active or not using JavaScript.

To detect if an element is currently active or not, you can use the document.activeElement property. It returns the element which is currently focused.

Thanks for reading.