title: Check if DOM element is editable (allow user input) with pure JS
body: <p>I have:</p>
  
  <pre><code>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;
  });
  </code></pre>
  
  <p>in code that implement <strong>2048</strong> game.</p>
  
  <p>I have user forms and want to exit from handler if <code>document.activeElement</code> point to <code>input</code>or <code>textarea</code> or <code>select</code> as handler break ability to perform normal edit operation for users.</p>
  
  <p>Currently I see two paths for such check:</p>
  
  <pre><code>["INPUT", "TEXTAREA", "SELECT"].indexOf(document.activeElement.nodeName) &gt; -1
  </code></pre>
  
  <p>and:</p>
  
  <pre><code>document.activeElement instanceof HTMLInputElement
      || document.activeElement instanceof HTMLTextAreaElement
      || document.activeElement instanceof HTMLSelectElement
  </code></pre>
  
  <p>What is a portable way and what is the best that confirm to HTML 5 standard and what is a shortest one?</p>
  
  <p><strong>UPDATE</strong> I try 3rd strategy - check for properties that unique for editable elements. From standard <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html" rel="nofollow">http://www.w3.org/TR/DOM-Level-2-HTML/html.html</a> with help of <code>undescore.js</code>:</p>
  
  <pre><code>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));
  </code></pre>
  
  <p>I get the list:</p>
  
  <pre><code> "autofocus", "disabled", "required", "value"
  </code></pre>
  
  <p>So I stop with:</p>
  
  <pre><code>if (document.activeElement.value) { ... }
  </code></pre>
  
  <p>checks!</p>