HTML 表单 - 使用添加 Enter (CR) 后缀的条形码扫描仪防止表单提交输入

Question

我有一个简单的表格，其中包含 2 个文本输入和 2 个非输入单元格，以及一个在修改第一个输入字段时运行的脚本，它查询数据库，然后更新同一行中的其他 3 个单元格。 这在第一个单元格/列中手动输入序列号时效果很好，但我们现在遇到了仓库中的用户使用条形码扫描仪扫描序列号条形码的问题。 扫描仪被硬编码为在成功扫描后输入回车 (CR) 后缀，这反过来又会同时提交表单。

理想情况下，我们希望在扫描条形码后允许脚本运行（类似于用户按 Tab 退出输入字段时），因为它会进行数据库查找并添加新的表格行，但会阻止表单提交为以及用户在扫描时还没有准备好提交表单。

这是我的表格/表格设置：

 $(document).ready(function() { $("#addRow").click(function() { var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"productCode\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>"; $("#shipmentItems").append(markup); }); // Find and remove selected table rows $("#shipmentItems").on("click", ".deleteRow", function() { $(this).closest('tr').remove(); }); }); $(document).ready(function() { $(document).on('change', '.form-control.serialNumber', function() { var serialNumber = $(this).val(); //console.log( recid ); // Create a reference to $(this) here: $this = $(this); ID = 'ABC123'; code = 'PC8765'; description = 'Acme Standard Widget'; $this.closest('tr').find('.form-control.assetID').val(ID); $this.closest('tr').children('.code').html(code); $this.closest('tr').children('.description').html(description); var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"code\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>"; $("#shipmentItems").append(markup); }); });

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <form class="form-horizontal" id="createShipments" action="processConsignment.php" method="post" role="form"> <table id="shipmentItems" class="table table-condensed table-striped table-bordered"> <thead> <th class="text-center" scope="col" width="20%">Serial</th> <th class="text-center" scope="col" width="15%">ID</th> <th class="text-center" scope="col" width="15%">Code</th> <th class="text-center" scope="col" width="45%">Description</th> <th class="text-center" scope="col" width="5%"></th> </thead> <tbody> <tr> <td><input type="text" class="form-control serialNumber" autocomplete="off" placeholder="Serial Number" name="serialNumber[]" value=""></td> <td><input type="text" class="form-control assetID" autocomplete="off" placeholder="Asset ID" name="assetID[]" value=""></td> <td class="code"></td> <td class="description"></td> <td class="deleteRow"><span class="glyphicon glyphicon-trash"></span></td> </tr> </tbody> </table> <button type="button" name="addRow" value="addRow" id="addRow" class="btn btn-primary">Add Asset</button> &nbsp; &nbsp; <button type="submit" name="createShipment" value="createShipment" id="save" class="btn btn-success">Create Shipment</button> </form>

Answer 1

CR 的键码是13 。 因此，您可以禁用在keydown事件上的提交。 您还可以允许提交其他组合，例如ctrl + enter 。 此外，我改进了 append function 以自动对焦附加行的第一列。

 let focusing = false; $(document).ready(function() { $("#addRow").click(function() { var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"productCode\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>"; $("#shipmentItems").append(markup); }); // Find and remove selected table rows $("#shipmentItems").on("click", ".deleteRow", function() { $(this).closest('tr').remove(); }); }); $(document).ready(function() { $(document).on("keydown", '.form-control.serialNumber', function(e) { let code = e.code || e.keyCode || e.which; if (code == 13) { if (e.ctrlKey) { $('#createShipments').submit(); } else { appendRow(); e.preventDefault(); return false; } } }); function appendRow() { var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"code\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>"; $("#shipmentItems").append(markup); focusing = true; $('#shipmentItems tr:last td:first input').focus(); focusing = false; } $(document).on('change', '.form-control.serialNumber', function() { if (focusing) return; var serialNumber = $(this).val(); //console.log( recid ); // Create a reference to $(this) here: $this = $(this); ID = 'ABC123'; code = 'PC8765'; description = 'Acme Standard Widget'; $this.closest('tr').find('.form-control.assetID').val(ID); $this.closest('tr').children('.code').html(code); $this.closest('tr').children('.description').html(description); appendRow(); }); });

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <form class="form-horizontal" id="createShipments" action="processConsignment.php" method="post" role="form"> <table id="shipmentItems" class="table table-condensed table-striped table-bordered"> <thead> <th class="text-center" scope="col" width="20%">Serial</th> <th class="text-center" scope="col" width="15%">ID</th> <th class="text-center" scope="col" width="15%">Code</th> <th class="text-center" scope="col" width="45%">Description</th> <th class="text-center" scope="col" width="5%"></th> </thead> <tbody> <tr> <td><input type="text" class="form-control serialNumber" autocomplete="off" placeholder="Serial Number" name="serialNumber[]" value=""></td> <td><input type="text" class="form-control assetID" autocomplete="off" placeholder="Asset ID" name="assetID[]" value=""></td> <td class="code"></td> <td class="description"></td> <td class="deleteRow"><span class="glyphicon glyphicon-trash"></span></td> </tr> </tbody> </table> <button type="button" name="addRow" value="addRow" id="addRow" class="btn btn-primary">Add Asset</button> &nbsp; &nbsp; <button type="submit" name="createShipment" value="createShipment" id="save" class="btn btn-success">Create Shipment</button> </form>