バーコードスキャナー機能のキーアップを2度実行しました

Question

私は各生徒にIDでバーコードを割り当てました。バーコードスキャナーを使って自分のIDをスキャンして出席確認をしています。私はキーアップ機能を使用していますが、毎回、自分のIDでバーコードをスキャンしたときに、キーアップ機能が2回実行されました。

<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をリッスンとしてバーコードリーダーが何らかの形で、キーを押しをシミュレートしていることを想像できます。おそらく2つのキーをシミュレートします。 Ctrl + Vはあなたの関数を2回呼び出すでしょう。私はあなたからkeyupリスナーの最上部に

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

を追加することをお勧めしますこの問題をデバッグする

。コンソールの出力を確認してください。したがって、読者が実際に2つのキーを一度にシミュレートするならば、どちらか一方を確実に無視することができます。

編集：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()); 
     } 
});