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.
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!