Question

我为每位学生分配了他们身份证中的条形码。我正在使用条形码扫描仪扫描他们的ID以检查他们的出勤率。即时通讯使用键盘功能，但每当我扫描其ID中的条形码时，键盘功能执行两次。

 <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

我可以想象条形码阅读器会以某种方式模拟按键，因为你在听键盘。可能它会模拟两个键 - 例如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());
      }
});

使用过的条码扫描功能键两次

1 个答案: