自动对焦输入和接受字母，数字和扫描的条形码

Question

我必须接受来自键盘或2d条形码扫描仪的输入。

输入是字母数字的混合，我希望用户能够使用 Ctrl + v 来粘贴他们的输入。目前，如果我尝试 Ctrl + v ，则仅检测并显示 v 键。

无论我尝试什么，我的光标自动对焦都不起作用。

见下面的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>

这是html部分。

格式化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>