Autofocus on input and accept letters, digits and scanned barcodes

Question

I have to accept either input from keyboard or 2d barcode scanner.

The input is mixture of alpha numeric, also I want user to be able to use Ctrl+v to paste their input. Currently if I try Ctrl+v, only v key is detected and shown.

Also my cursor autofocus does not work, no matter what I try.

See below the javascript.

<script>
  var codes = "";
  var codes_el = document.getElementById('codes');
  var output_el = document.getElementById('output');

  function process_key(event) {
      var letter = event.key;
      if (letter === 'Enter') {
          event.preventDefault();
          letter = "\n";
          event.target.value = "";
      }
      // match numbers and letters for barcode
      //  if (letter.match(/^[a-z0-9]$/gi)){
      if (letter.match(/^[a-z0-9\n-]$/gi)) {
          codes += letter;
      }
      codes_el.value = codes;
      output_el.innerHTML = codes;
  }
</script>

<script>
  function testAttribute(element, attribute) {
      var test = document.createElement(element);
      if (attribute in test) {
          return true;
      } else
          return false;
  }

  window.onload = function() {
      if (!testAttribute('input', 'autofocus'))
          document.getElementById('codes').focus();
      //for browser has no autofocus support, set focus to Text2.
  }
</script>

and here is the html part.

Formatted HTML:

<div class="barcode_box">
  <br>
  <form method="POST" action="scanned.php">
    <input onkeydown="process_key(event)" />
    <input type="submit" value="Submit" />
    <input type="hidden" name="codes" id="codes" autofocus/>
  </form>
  <pre id="output">
</pre>
  <br>
</div>