USB 条码扫描器无需服务器调用即可重复扫描

Question

不确定我的术语在所有这些方面是否正确。 我知道我的代码也没有效率。 在这一点上寻找功能而不是效率。 （只是一个试图解决后勤问题的老师）。

我有一个 web 应用程序，我们用来检查学生进出图书馆。 由于新型冠状病毒肺炎，我们正在尝试减少触摸键盘并加快办理登机手续。 为此，我们有一个 USB 扫描仪可以扫描学生证。

我的 Webapp 加载模板 html，然后将名称等添加到不同的选择元素。 当学生签到时，姓名会出现在窗口的另一半，并等待他们单击其姓名旁边的结帐。 我相信这是在所谓的客户端完成的。

为了添加条形码扫描仪，我添加了一个带有文本输入的表单元素。 这是让条码扫描器与客户端交互的唯一方法吗？

<form><input type="text" id = "barcodeInput" size="1"></form>  

然后我有一些 jQuery 测试以查看输入是条形码（按下前缀和返回键），如果是这样，则条形码中的学生 ID 号将通过循环以在学生的选择选项中找到匹配的 ID姓名（ID 存储在值中，学生姓名存储在文本中）。 此处也阻止了默认操作

所有这些都有效，我可以让 1 个学生添加到我的应用程序的“签入”面板中。

我无法让扫描仪在第二个学生身上工作。 我认为这与我使用表单输入元素的事实有关，这可能需要服务器调用，但我不能这样做，因为我需要有越来越多的学生被签入图书馆。

我借了这个，目前正在使用

$(document).ready(function() {
    var barcode=""; //sets my variable
    $(document).keydown(function(e) //looking to intercept the barcode scanner output
    {
        var code = (e.keyCode ? e.keyCode : e.which); //don't really know what this does since I borrowed this
        if(code==13&&(barcode.substring(1,5)=="SCAN"))// Enter key hit & from scanner
        {
            e.preventDefault(); //stops the enter key from actually "running" and stops the barcode from going into the input field (I think)
            barcode = barcode.slice(5);// remove the prefix so I am left with student number aka barcode
            alert(barcode); //lets me know I'm getting the correct student number
            processBarcode(barcode);        //sends to process barcode
        }
        else if(code==9)// Tab key hit    //I may not need these next 10ish lines
        {
            e.preventDefault();
            alert(barcode);      
        }
        else
        {
            e.preventDefault();
            barcode=barcode+String.fromCharCode(code);
        }
    });
});

这会在 select 元素中找到学生，然后更改 select 元素以读取该姓名，并将姓名发布在“谁正在签入”表格单元格中

function processBarcode(barcode){
     var name = "";
   $("#studentNameSelect option").each(function(){ //runs through the select element that has all student names...the name is in the parameter "text" and student ID # is in the parameter val
        if($(this).val()==barcode){ //looking to see if the student ID # matches the specific option in the select element
             name = $(this).text(); //figure out the student name based on ID #
             $(this).prop('selected', true); //set the select element to show this specific option
             $("#selectedName").html(name);  //puts student name in a table cell so they know they are picking the correct name
             //$("#barcodeInput").trigger("reset"); //here I'm trying to get the form element input to reset so I can use it again...this didn't work so its commented out
             $("#teacherNameSelect").focus(); //puts the focus onto the next select item so I can do other things
             return false; //breaks the each loop once student name has been found
        }
    }); 
}

然后这是将姓名移动到“已登记”面板上的代码，以便下一个学生可以登记

function buildAttendanceRow(stringPackage){ //this function takes info from the selection panel and builds a table row in the "I'm at the library" panel. Students click check out when they leave the library
console.log(stringPackage);
    var package = JSON.parse(stringPackage); //receives a package of info from the selects, I do send this to a server function to email teachers that student arrived to the library...
console.log(package);
    var html = "";
    var hiddenId = new Date().getTime().toString(); //this cell is used to keep track of a specific instance of a student checked into the library so I can remove later and then mark in a backend spreadsheet database
    var nameCell = '<td class="package" id="'+hiddenId+'">'+package.student+'</td>';
    var checkOutButton = '<input type="button" value="Check Out" id="COButton">';
    var checkoutButtonCell = '<td class="center">'+checkOutButton+'</td>';
    html+="<tr>"+nameCell+checkoutButtonCell+"</tr>";
    $("#checkedInTable").append(html);   //puts the new table row into the checked in table
    $('#'+hiddenId).data("package",package); //stores info so I can remove table row and update database
    
    
    var lastTableRow = $('#checkedInTable tr:last');
    var button = lastTableRow.find('#COButton');
        //add the click function for removing row and sending checked out info to server for email and for database purposes
        button.click(function(e){
            var x = e.pageX;
            var y = e.pageY;
            var o = {
                left: x,
                top: y
            };
           $("#progressMonitor").show().offset(o);
            $(this).prop("disabled",true);
            var row = $(this).closest('tr');
            var carrierCell =$('#'+hiddenId); 
            var d = new Date();
            var payload = new Object(); //this object gets transferred to the server function, the user interface doesn't refresh here, it just has a dynamic html table built and shrunk as kids check in or check out
                payload.checkInTime = carrierCell.data("package").checkInTime;
                payload.timeIn = carrierCell.data("package").timeIn;
                payload.student = carrierCell.data("package").student;
                payload.teacherEmail = carrierCell.data("package").teacherEmail;
                payload.teacherName = carrierCell.data("package").teacherName;
                payload.reason = carrierCell.data("package").reason;
                payload.checkOutTime = d;
                payload.timeOut = d.getTime();
           var stringPayload = JSON.stringify(payload);
           row.hide();
           alternateRowColors($("#checkedInTable"));
           google.script.run.withSuccessHandler(emailAndRecordsSuccess).withFailureHandler(emailAndRecordsFailure).emailAndRecords(stringPayload);//calling the server function
        });
    
    var numRows =  $("#checkedInTable tr" ).length;
    if(numRows>2){
        alphaSortTable(); //puts the student names in alpha order so it is easier for them to checkout of the library
    }
    alternateRowColors($("#checkedInTable")); 
    $("#progressMonitor").hide();
    $("#barcodeInput").focus(); //here is me trying to get the scanner back into the input field so there is somewhere for the scanner data to go; I expected this to be all I needed to do, but at this point, even though the input is focused, the the scanner won't fire onto the document or into the field or anything like that
     alert($("#barcodeInput").val()); //this is telling me that there is no value in the input field at this point, I thought there might be info stored here screwing up the scanner

}

Answer 1

解决方案是在我的客户端工作完成后将一个函数重新绑定到文档。 将其更改为命名函数：

$(document).ready(function() {
    var barcode=""; 
    $(document).keydown(function(e) 
    {
        var code = (e.keyCode ? e.keyCode : e.which); 
        if(code==13&&(barcode.substring(1,5)=="SCAN"))
        {
            e.preventDefault(); 
            barcode = barcode.slice(5);
            processBarcode(barcode); 
        }else if(code==9)// Tab key hit  
             {e.preventDefault();     
        }else{
            e.preventDefault();
            barcode=barcode+String.fromCharCode(code);
        }
    });
});

我现在有：

function getBarcode(){
var barcode=""; 
    $(document).keydown(function(e) 
    {
        var code = (e.keyCode ? e.keyCode : e.which); 
        if(code==13&&(barcode.substring(1,5)=="SCAN"))
        {
            e.preventDefault(); 
            barcode = barcode.slice(5);
            processBarcode(barcode); 
        }else if(code==9)// Tab key hit  
             {e.preventDefault();     
        }else{
            e.preventDefault();
            barcode=barcode+String.fromCharCode(code);
        }
    });

和

$(document).ready(function() {
     getBarcode();
}

我可以打电话

getBarcode();

任何地方重新连接要寻找条码扫描仪的文件。