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。 此外，我改进了您的附加功能，以自动聚焦附加行的第一列。

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" 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>