Foreword:
First, the barcode scanning head can be seen as a keyboard device in the device manager.
Then the screen is also a light source, the scanner can't scan the screen, just print the barcode on the paper.
Then each manufacturer can set the scan result to set a custom prefix and suffix, search for the device model to find the document, and scan the specified setting code. I use the default setting of the Honeywell MS5145 barcode reader.
That is, after the scan is successful (the beep can be turned off), the keyboard automatically enters: scan result (bar code) + Enter.
The code mainly uses the keyboard in JS to monitor events, and then sets a timer to verify.
Then my business requirement is a 13-digit pure number product number barcode and a 16-digit number plus alphabetic MAC address, which can be automatically input by scanning the code on the same page (check before input).
Get the HTML DOM Event object through keydown
Event.keyCode, event.charCode, and event.which of the attributes contained in event can be used to know which keyboard key was pressed, which contains browser compatibility issues. Please refer to this article:
The obtained values are all corresponding keyboard ASCII codes.
I considered the fastest array subscript value and some search algorithms. Later, I thought that the business needs here only need to enter numbers and letters, so I chose to use key-value pairs in js.
The following key-value pairs are used:
Use keyDate[ascii value] to get the key
// 键盘ASCII码:"按键"
var keyData={
//数组部分有每个按键有两个对应的两个ascii值是因为
//主键盘区的数组和Num数字辅助键盘区(键盘右侧数字小键盘)同一数字的ascii值不同
48:"0",96:"0",
49:"1",97:"1",
50:"2",98:"2",
51:"3",99:"3",
52:"4",100:"4",
53:"5",101:"5",
54:"6",102:"6",
55:"7",103:"7",
56:"8",104:"8",
57:"9",105:"9",
//键盘中大写A和小写a的ascii值是相同的 我的需求中必须大写字母 所以:
65:"A",66:"B",67:"C",68:"D",
69:"E",70:"F",71:"G",72:"H",
73:"I",74:"J",75:"K",76:"L",
77:"M",78:"N",79:"O",80:"P",
81:"Q",82:"R",83:"S",84:"T",
85:"U",86:"V",87:"W",88:"X",
89:"Y",90:"Z"};
then we
We add this code to the page
<script>
$(document).keydown(function (event) {
console.log(keyData[event.keyCode]+"----"+event.keyCode);
});
</script>
Use the scanner to scan (system operation focus needs to be on the current page of the browser)
Print the following in the chrome console
The reason for all capitalization is explained in the keyDate[] code comment
We can see that he also pressed the left shift button once when switching between upper and lower case (note that)
Next, look at the input speed of the keys after the scan is successful:
//键盘事件中加入
console.log(new Date().getTime()/1000);
The input is completed in about 0.2 seconds (maybe the performance of the computer used has a certain relationship, so the next monitoring reset time is set to 0.5 seconds is a safer time)
The following is a demo that can be used directly from the shareable code extracted from the project:
<!DOCTYPE html>
<html>
<head>
<title>扫码枪demo</title>
</head>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
<body>
mac地址:<input type="text" name="macAddress" id="macAddress" placeholder="16位" /><br>
产品编号:<input type="text" name="productNumber" id="productNumber" placeholder="13位" />
</body>
<script>
var temporaryKeyList="";
var timer="";
$(document).keydown(function (event) {
var key=event.keyCode;
//依次是屏蔽 回车 左Shift
if (key==13||key==16) {
return;
}
//如果有定时器就不创建新的check方法
if (!timer) {
temporaryKeyList="";
timer=setInterval("checkInput()",500);
}
temporaryKeyList+=keyData[key];
});
function checkInput(){
if (temporaryKeyList.length==13) {
$("#productNumber").val(temporaryKeyList);
}
if (temporaryKeyList.length==16) {
$("#macAddress").val(temporaryKeyList);
}
//清除定时器
clearTimeout(timer);
timer=null;
}
var keyData={
48:"0",96:"0",
49:"1",97:"1",
50:"2",98:"2",
51:"3",99:"3",
52:"4",100:"4",
53:"5",101:"5",
54:"6",102:"6",
55:"7",103:"7",
56:"8",104:"8",
57:"9",105:"9",
65:"A",66:"B",67:"C",68:"D",
69:"E",70:"F",71:"G",72:"H",
73:"I",74:"J",75:"K",76:"L",
77:"M",78:"N",79:"O",80:"P",
81:"Q",82:"R",83:"S",84:"T",
85:"U",86:"V",87:"W",88:"X",
89:"Y",90:"Z"};
</script>
</html>
Probably the logic is to monitor the keyboard event for the next 0.5 seconds after the keyboard key is pressed.
If it meets 13-bit 16-bit (my needs), it is considered to be a code scanner input. This solution may just hit the keyboard within 0.5 seconds of the input scanned by the scanner, but it does not meet my length requirements. That is, it fails, just rescan, avoiding wrong input.
But there is still a chance of error, so I added my special request verification (code not listed) in checkInput(), and I can add verification rules by myself.
If you have a better solution or case, please @我.
Sincerely