javascript - 简单的 HTML 表单输入字段，包含来自条形码扫描仪的多个值

Question

我知道条形码扫描仪只是另一种键盘，每次扫描后都会发送键码 13，我有一个非常简单的表单，只有一个输入字段，我希望能够扫描多个条形码并单击提交以发布数据。我想我需要一个 javascript 来做这个，但我不擅长 javascript。

最终结果看起来像这样。您可以看到多个条形码已被扫描，它们出现在图片的底部。

目标是在不触摸键盘的情况下扫描所需数量的条形码，扫描完成后单击鼠标按提交按钮。当我点击提交时，它们应该被发布到另一个页面。

我确信这对于擅长 javascript 的人来说是一件简单的事情。

这是 HTML 表单代码。

<form action="myform5.php" method="post">
   <p>First name: <input type="text" name="serial" /></p>
   <input type="submit" name="submit" value="Submit" />
</form>

我的问题是如何让它执行我上面描述的操作？

提前致谢。

Answer 1

这应该有效。

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)){
    codes += letter;
  }
  
  
  codes_el.value = codes;
  output_el.innerHTML = codes;
}

<form method="POST" action="myform5.php">
  <input onkeydown="process_key(event)" />
  <input type="submit" value="Send" />
  <input type="hidden" name="codes" id="codes" />
</form>

<pre id="output">
</pre>

然后你就可以像这样进入myform5.php:

<?php
// codes will be a string of barcodes seperated by "\n"
$codes = $_POST['codes'];

// get as array like so
$barcodes = explode("\n", $codes);

// build up string of barcodes
$barcode_str = "";
$prefix = '';
foreach ($barcodes as $barcode){
    $barcode_str .= $prefix . "'" . $barcode . "'";
    $prefix = ', ';
}

$query = "select * from hdds where serial IN (" . $barcode_str . ");";

/* do things with query here */

// once your done processing
// redirect the user back to the form page
header("Location: FormPage.html");
?>

我假设您的条形码是数据库中的字符串。

因此您必须将查询中的每个条形码包装起来。