检查DOM元素是否可以使用纯JS进行编辑(允许用户输入)

Question

我有：

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;
});

在实现2048游戏的代码中。

我有用户表单，如果document.activeElement指向input、textarea或select作为处理程序中断能力来为用户执行正常编辑操作，我想退出处理程序。

目前，我看到了两条这样的检查路径：

["INPUT", "TEXTAREA", "SELECT"].indexOf(document.activeElement.nodeName) > -1

和：

document.activeElement instanceof HTMLInputElement
    || document.activeElement instanceof HTMLTextAreaElement
    || document.activeElement instanceof HTMLSelectElement

什么是可移植的方式，什么是最符合HTML5标准的方式，最短的方式是什么？

UPDATE我尝试第三种策略-检查可编辑元素的唯一属性。来自标准http://www.w3.org/TR/DOM-Level-2-HTML/html.html借助undescore.js:

var good = _.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));

我得到了名单：

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

所以我停止使用：

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

检查！

Answer 1

这个答案证实了标准，优雅，但可能缺乏可移植性：

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