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

Posted 2023-05-08

【中文标题】HTML 表单 - 使用添加 Enter (CR) 后缀的条码扫描器防止表单提交输入

【英文标题】：HTML Form - Prevent Form Submission For Input Using Barcode Scanner that adds Enter (CR) Suffix

【发布时间】：2022-01-16 16:28:39

【问题描述】：

我有一个包含 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" >Serial</th>
      <th class="text-center" scope="col" >ID</th>
      <th class="text-center" scope="col" >Code</th>
      <th class="text-center" scope="col" >Description</th>
      <th class="text-center" scope="col" ></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>

【参考方案1】：

CR 的密钥代码是13。因此，您可以禁用 keydown 事件的提交。您还可以允许提交其他组合，例如ctrl+enter。 此外，我改进了您的附加功能，以自动聚焦附加行的第一列。

let focusing = 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;


function fillOtherFields(serialNumberField) 
  var serialNumber = $(serialNumberField).val();
  $serialNumberField = $(serialNumberField);

  ID = 'ABC123';
  code = 'PC8765';
  description = 'Acme Standard Widget';

  $serialNumberField.closest('tr').find('.form-control.assetID').val(ID);
  $serialNumberField.closest('tr').children('.code').html(code);
  $serialNumberField.closest('tr').children('.description').html(description);
  appendRow();




$(document).ready(function() 
  $("#addRow").click(appendRow);

  // 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 
        fillOtherFields(e.target);
        e.preventDefault();
        return false;
      
    
  );

  $(document).on('change', '.form-control.serialNumber', function(e) 
    if (focusing) return;
    fillOtherFields(e.target);

  );
);

<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" >Serial</th>
      <th class="text-center" scope="col" >ID</th>
      <th class="text-center" scope="col" >Code</th>
      <th class="text-center" scope="col" >Description</th>
      <th class="text-center" scope="col" ></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>

【讨论】：

这几乎是我需要的。当您输入序列号并按 Tab 时，它会使用附加值更新同一行中的其他表格单元格。但是，如果输入序列号并按回车，则不会使用附加值更新其他表格单元格。无论您是按 Tab 还是 Enter/Return，我都需要它来更新其他表格单元格。

@user982124 已实现。现在检查。