Javascript 使用纯JS检查DOM元素是否可编辑（允许用户输入）

我有：

在实现2048游戏的代码中

我有用户表单，如果

文档，我想退出处理程序。activeElement

指向

输入

或

文本区域

或

选择

作为处理程序中断功能，为用户执行正常的编辑操作

目前，我看到两种检查路径：

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

以及：

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

更新我尝试第三种策略-检查可编辑元素的唯一属性。借助于

undescore.js

，来自标准：

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

我得到清单：

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) { ... }

---

第一个看起来不错，不过为了安全起见，我可能会放一个

toUppercase

@adeneo同意，我刚刚读到：+1

/^（输入| textarea |选择）$/I.test（document.activeElement.nodeName）

是另一个选择，如果您正在寻找短代码。

i

标志解决了案例问题。（另外，如果您要查找缩写，可以说

开关（event.keyCode | | event.which）

，您不需要创建一个在赋值后只使用一次的变量。）注意，仅仅因为元素是一个输入或具有

值

属性并不意味着它是“可编辑的”：它可以是一个按钮，或者它可以是

readonly

或禁用，等等。

readonly

元素可以。对于具有contenteditable=“true”属性的元素不起作用

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

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