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>