javascript - USB 条码扫描器重复扫描,无需服务器调用
问题描述
不确定我的术语在所有这些方面是否正确。我知道我的代码也效率不高。在这一点上寻找功能而不是效率。(只是一位试图解决后勤问题的老师)。
我有一个网络应用程序,我们用它来检查学生进出图书馆。由于 COVID,我们正努力减少触摸键盘并加快办理登机手续的速度。为此,我们有一个可以扫描学生证的 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
}
解决方案
解决方案是在我的客户端工作完成后将函数重新绑定到文档。将其更改为命名函数:
$(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();
任何地方重新连接文档以寻找条形码扫描仪。
推荐阅读
- javascript - 尝试在 GatsbyJS 中实现仅限客户端的路由时出现运行时错误
- angular - 在角度应用程序中使用 oauth 2 为 microsoft dynamics 365 crm 生成 accessToken
- python - 如何使用 Androguard 从 APK 中提取任何资源文件?
- javascript - 如何在moment js中结合两个时间和日期值
- python - 我能够得到代码的其他部分,其他部分不起作用
- powerbi-embedded - Power Bi Embedded - 报表上的动态过滤器
- python-3.x - Discord.py 使用自定义时间间隔进行调度
- xml - WEB-XML 文件显示错误 Javaee_7.xsd 错误
- java - 在 Postman 中提供 OAuth2.0 令牌以与 Java Spring Boot 对话
- lua - lua中的对象创建