title: Javascript keydown function conflict on input focus
body: <p>How to prevent keydown event when input is focused?</p>
  
  <p>I have a function that assigns some action to keyboard keys (mainly player control), but when using <code>&lt;input&gt;</code> all assigned keys trigger that action as well. Therefore it is impossible to use <code>&lt;input&gt;</code> properly when typing.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function keyboardShortcuts(e){
          
    //Do some stuff when keyboard keys are pressed
    
    switch(e.code){
    
      case 'KeyJ':
        console.log('KeyJ');
        break;
      
      //...
    }
  }
  
  document.addEventListener('keydown',keyboardShortcuts);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="search" placeholder="search..."&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How to fix it? Should I check if input is not focused?</p>
  
  <pre><code>function keyboardShortcuts(e){
      if(document.getElementById('search') !== document.activeElement){
          switch(e.code){
              //...
         }
      }
  }
  </code></pre>
  
  <p>Or maybe there is some method similar to <code>e.preventDefault()</code>?</p>
  
  <pre><code>document.getElementById('search').addEventListener('focus',function(){
      //... prevent keyboardShortcuts frum running ?????
  });
  </code></pre>