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

什么是便携式方式，哪种方式最符合HTML 5标准，什么是最短标准？

更新我尝试第三种策略 - 检查可编辑元素的唯一属性。在undescore.js的帮助下，从标准http://www.w3.org/TR/DOM-Level-2-HTML/html.html开始：

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

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

1 个答案: