2

I want to develop a simple web application using the jQuery scanner detection api. I have followed the tutorials in the given two links.

jQuery.ScannerDetection - tutorial & best practices

Detect when input box filled by keyboard and when by barcode scanner.

This is my code

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="./scanner_detection/jquery.scannerdetection.js"></script>
    <script type="text/javascript">
        $(document).scannerDetection({
            timeBeforeScanTest: 200, // wait for the next character for upto 200ms
            startChar: [120], // Prefix character for the cabled scanner (OPL6845R)
            endChar: [13], // be sure the scan is complete if key 13 (enter) is detected
            avgTimeByChar: 40, // it's not a barcode if a character takes longer than 40ms
            onComplete: function(barcode, qty){ ... } // main callback function 
        });
    </script>
</head>
<body>
    Barcode<br>
    <input id="barcode" type="text" value="Barcode appears here">
    <script>
        $(window).ready(function(){
            console.log('all is well');
            $(window).scannerDetection();
            $(window).bind('scannerDetectionComplete',function(e,data){
                console.log('complete '+data.string);
                $("#barcode").val(data.string);
            })
                .bind('scannerDetectionError',function(e,data){
                console.log('detection error '+data.string);
            })
                .bind('scannerDetectionReceive',function(e,data){
                console.log('Recieve');
                console.log(data.evt.which);
            })
    </script>
</body>
</html>

When I scan a barcode the barcode value is appearing in the input box but when a second scan happens the second barcode value is appending to the previous one. How do I clear the previous barcode everytime a new scan happens?

When I scan two barcodes the input box looks like this.

enter image description here

How can I refresh the text box every time a new scan happens?

Community
  • 1
  • 1
Minions
  • 1,273
  • 1
  • 11
  • 28
  • What is `#bCode`? It's not in your HTML. Can't you use the same callback to assign the new value to `#barcode` as well? – Boaz Mar 03 '16 at 07:00
  • that is barcode not bCode. I have changed it. Can you please tell me how do I do it in the code. – Minions Mar 03 '16 at 08:45

1 Answers1

0

Perhaps you can try something like this.

$(window).bind('scannerDetectionComplete',function(e,data){
    console.log('complete '+data.string);
    $("#barcode").removeAttr('value');
    $("#barcode").val(data.string);
})

Hope this helps.

Norman
  • 387
  • 2
  • 11