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

Question

i have assigned each student a barcode in their IDs. and im using barcode scanner to scan their IDs to check their attendance. im using a keyup function but everytime i scanned the barcode in their ID the keyup function executed twice.

 <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

I could imagine that the barcode reader is somehow simulating a key press, as you listen for keyup. Probably it simulates two keys - e.g. Ctrl + V would call your function twice.

To debug this issue I would recommend to add

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

at the very top of your keyup listener. Check the console output. So if the reader really simulates two keys at once you could certainly ignore one of both.

EDIT: As the OP wrote, 13 is shown up in the console additionally to another key code. 13 is the ASCII code for CR (carriage return).

So to ignore this key write:

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