title: enable / disable key press event based on focus in input box
body: <ul>
  <li>If input box is not focused, keypress event should be triggered </li>
  <li>If input box is focused, keypress event should be disabled, and
  typing text should be allowed.</li>
  <li>I've tried focus and blur but that didn't work.</li>
  </ul>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="button"&gt;
  &lt;button class="btn"&gt;1&lt;/button&gt;
  &lt;button class="btn"&gt;2&lt;/button&gt;
  &lt;button class="btn"&gt;3&lt;/button&gt;
  
  &lt;/div&gt;
  
  &lt;div class="form"&gt;
  &lt;form action="" id="submit"&gt;
    &lt;input type="text" id="num" number/&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div id="show"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$(function($){
          //on click
      $('.btn').click(function(){
                  var me = $(this);
          $('#show').html(me.text());
      });
      //on keypress
      $(window).keypress(function(k){         
              switch (k.keyCode) {                
                  // user presses the "1"
              case 49:
               $('#show').html(1);
                 break;           
                  // user presses the "2"
              case 50:
              $('#show').html(2);
                 break;
  
                  // user presses the "3"
              case 51:
              $('#show').html(3);
                 break;
            }
      });
  
      //on submit
      $('#submit').submit(function(e){
          e.preventDefault();
        var data = $('#num').val();
        $('#show').html(data);
        $('#num').val('');
      })
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/sn13LL3t/" rel="nofollow noreferrer"><strong>JSFiddle</strong></a></p>