使用的条形码扫描仪功能 keyup 执行了两次

Question

我已在每个学生的 ID 中分配了一个条形码。我使用条形码扫描仪扫描他们的身份证以检查他们的出勤情况。我使用 keyup 功能，但每次我扫描他们 ID 中的条形码时，keyup 功能都会执行两次。

 <script type="text/javascript">


       function loaddelegates($barcode)
         {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
              if (this.readyState == 4 && this.status == 200) {
               document.getElementById("getdel").innerHTML = this.responseText;
               $("#barcode").focus();
              }
            };
            xhttp.open("GET", "mealclient/" + $barcode, true);
            xhttp.send();

          }

$(function() {
           $('#barcode').attr('maxlength','13');
        $(document).on('keyup','#barcode',function(e) {
           e.preventDefault();
            if ($(this).val().length >= 13) {
                loaddelegates($(this).val());
                return false;
            }
        });
      });

  <div class="site-wrapper-inner">

    <div class="cover-container">

      <div class="masthead clearfix">
        <div class="inner">
          <h3 class="masthead-brand">PITYLC</h3>
          <nav>
            <ul class="nav masthead-nav">
            @foreach($meals as $meal)
              <li class="active"><a href="#">{{$meal->date}}</a></li>
            @endforeach
            </ul>
          </nav>
        </div>
      </div>
      <img src="/img/COVER.png" class="img-responsive" alt="Responsive image">

      <div class="inner cover" id = "getdel">
      @foreach($meals as $meal)
        <h1 class="cover-heading" style = "font-weight: Bold">{{strtoupper($meal->meal)}}</h1>
      @endforeach
         <div class="form-group">
            <label style = "color: #e36c1d">BARCODE</label>
            <input class="form-control" style="font-size:30px; color: #e36c1d"  id = "barcode" autofocus>
        </div>
         <div class="form-group">
            <label style = "color: #e36c1d">NAME</label>
            <input class="form-control" style="font-size:30px; color: #e36c1d" >
        </div>
         <div class="form-group" >
            <label style = "color: #e36c1d">ORGANIZATION</label>
            <input class="form-control" style="font-size:30px; color: #e36c1d" >
        </div>
         <div class="form-group">
            <label style = "color: #e36c1d">POSITION</label>
            <input class="form-control" style="font-size:30px; color: #e36c1d">
        </div>
         <div class="form-group">
            <label style = "color: #e36c1d">SCHOOL</label>
            <input class="form-control" style="font-size:30px; color: #e36c1d">
        </div>


      </div>



    </div>

  </div>

</div>

Answer 1

我可以想象条形码阅读器正在以某种方式模拟按键，当您听 keyup 时。可能它模拟了两个键 - 例如Ctrl + V 会调用你的函数两次。

要调试这个问题，我建议添加

var code = e.keyCode || e.which;
console.log(code);

在您的 keyup 监听器的最顶部。检查控制台输出。因此，如果读者真的一次模拟两个键，您当然可以忽略其中一个。

编辑：正如 OP 所写，控制台中除了另一个键码外还显示了 13。 13 是 CR（回车）的 ASCII 码。

所以忽略这个键写：

$(document).on('keyup','#barcode',function(e) {
      e.preventDefault();
      var code = e.keyCode || e.which;
      if (code != 13 && $(this).val().length >= 13) {
          loaddelegates($(this).val());
      }
});