javascript - Check if DOM element is editable (allow user input) with pure JS -

i have:

document.body.addeventlistener("keydown", function(event) {   var key = event.keycode || event.which;   switch (key) {       case 38: ui.action.up(); break;       case 40: ui.action.down(); break;       case 37: ui.action.left(); break;       case 39: ui.action.right(); break;   }   return false; }); 

in code implement 2048 game.

i have user forms , want exit handler if document.activeelement point inputor textarea or select handler break ability perform normal edit operation users.

currently see 2 paths such check:

["input", "textarea", "select"].indexof(document.activeelement.nodename) > -1 

and:

document.activeelement instanceof htmlinputelement     || document.activeelement instanceof htmltextareaelement     || document.activeelement instanceof htmlselectelement 

what portable way , best confirm html 5 standard , shortest one?

update try 3rd strategy - check properties unique editable elements. standard http://www.w3.org/tr/dom-level-2-html/html.html of undescore.js:

var = _.intersection(object.keys(htmlinputelement.prototype),                           object.keys(htmltextareaelement.prototype),                           object.keys(htmlselectelement.prototype)) var bad = _.union(object.keys(htmlobjectelement.prototype),                   object.keys(htmlanchorelement.prototype),                   object.keys(htmldivelement.prototype),                   object.keys(htmlbuttonelement));  console.log(_.difference(good, bad)); 

i list:

 "autofocus", "disabled", "required", "value" 

so stop with:

if (document.activeelement.value) { ... } 

checks!

this answer confirms standards, elegant, may lack of portability:

if (document.activeelement.value) { ... }