Check if currently active element is any kind of input

Question

I am trying to detect if currently active element is any kind of input field. Currently I have this:

var activeElement = document.activeElement

if (activeElement && (activeElement.tagName.toLowerCase() === 'input' || 
    activeElement.tagName.toLowerCase() === 'textarea' || 
    activeElement.tagName.toLowerCase() === 'select' || 
    activeElement.tagName.toLowerCase() === 'button')) {
    return false
}

Is there a better way to do this? I am using Vue JS, so if there is a solution with Vue API that is ok too.

Answer 1

You could put all the element types you want to check in an array and check if your active Element is in it:

var activeElement = document.activeElement;
var inputs = ['input', 'select', 'button', 'textarea'];

if (activeElement && inputs.indexOf(activeElement.tagName.toLowerCase()) !== -1) {
    return false;
}