Get Active Element with JavaScript

Dan Pastori avatar
Dan Pastori October 18th, 2022

Recently, I’ve been working on AmplitudeJS 6.0. One of the features of Amplitude is to bind key events to certain methods. A simple feature with one caveat. If you bind the key press events to the page, but the user is in a form field, the event will still fire. This is un-wanted behavior.

Luckily you can solve this issue with JavaScript fairly easily. The solution can be used in multiple scenarios as well. We just have to get the active element.

Getting the Active Element in JavaScript

To get the active element in JavaScript, run the following code:

let activeElement = document.activeElement;

That’s it! Using the document.activeElement method, you now have access to the active element object within your code. From there, you can do all sorts of simple checks to make sure your UI is functioning as it should be!

Detect if the User is Focused on Form Elements

One example that we use this for is within AmplitudeJS. We don’t want to run any of the bound keypress event handlers if the user is focused within a form. To do that, we made a simple function to check if the user is focused in a form:

	let activeElement = document.activeElement.tagName.toLowerCase();

	let formElements = [

	return formElements.indexOf( activeElement ) > -1;

When a user is focused on an element that is a form element and they press a key they normally want to perform a method (i.e space bar == play/pause), we check to see if they are in a form or not. This way every word doesn’t play or pause the audio.

We find the type of element by grabbing the document.activeElement.tagName to get the name of the element. Then we check to see if the element name is in the formElements array (which is the list of form elements we want to make sure aren’t active). This way we return true if the active element is within a form, and false if it’s not.


This is a pretty slick little script that can determine what the active element is on the page and help add that fine grain control over any UI you are building. If you have any questions, feel free to reach out on Twitter (@danpastori). If you want to have these tutorials emailed directly to your inbox, make sure to sign up for our mailing list!

Support future content

The Ultimate Guide to Building APIs and Single-Page Applications with Laravel + VueJS + Capacitor book cover.

Psst... any earnings that we make off of our book is being reinvested to bringing you more content. If you like what you read, consider getting our book or get sweet perks by becoming a sponsor.

Written By Dan

Dan Pastori avatar Dan Pastori

Builder, creator, and maker. Dan Pastori is a Laravel certified developer with over 10 years experience in full stack development. When you aren't finding Dan exploring new techniques in programming, catch him at the beach or hiking in the National Parks.

Like this? Subscribe

We're privacy advocates. We will never spam you and we only want to send you emails that you actually want to receive. One-click unsubscribes are instantly honored.