Get Active Element with JavaScript

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:

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

    let formElements = [
        'input',
        'textarea',
        'select',
    ];

    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.

Conclusion

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!