功能要求:輸入框禁止手動輸入,只允許掃描槍掃入
主要問題:
掃碼槍就是模擬鍵盤的輸入,實際上和手動輸入的沒有區別
1.如何判斷是否手動輸入
2.如何判斷一個條碼輸入完成
解決方案
掃描搶的掃描速度比認為手動輸入的速度快很多,可以用於判斷是手動輸入還是掃描槍掃入的。
手動輸入的解決辦法就是:對比一個鍵從按下到抬起的時間間隔,以及兩次按鍵的時間間隔。
因為掃碼槍的輸入速度非常的快,我測試的掃碼槍輸入的間隔大概在15-60毫秒,然后手動輸入的100-200之間,除非刻意的想突破限制進行快速的輸入。這個間隔值可以控制的很小,前提不要快過掃碼搶的速度。
輸入完成的判斷:可以對輸入框變化做一個監聽,如果達到我們想要的位數,則提交服務器端進行處理;
第二種是基於掃碼槍,因為我使用的掃碼槍可以配置掃碼成功最后附加一個回車。所以根據回車的keycode就可以判斷為輸入已經結束,然后獲取輸入框的value,再進行后續的處理(提交服務器等)。
代碼
//*****2020-08-05**********條碼輸入窗口要設置成只能條碼槍掃入,禁止鍵盤和復制粘貼的功能*****************************
var keyDownTime = 0; //按下的時間
var temp = 0; //用於檢查相鄰兩次按鍵,上一次按鍵按下的時間
//按鍵按下記錄摁下時間
YAHOO.util.Event.addListener("packSn","keydown",function(e){
var d = new Date(); //
keyDownTime = parseInt(d.getTime()); //按下的時間
});
//鍵盤釋放時記錄釋放時間
YAHOO.util.Event.addListener("packSn","keyup",function(e){
var d = new Date();
var keyUpTime = d.getTime();//松開的時間
//console.log(keyDownTime);
//console.log(keyUpTime);
//console.log((keyUpTime-keyDownTime));
if((keyUpTime-keyDownTime) > 400 ){ //判斷鍵按下到松開的時間
M.show("error","1禁止手動輸入");
YAHOO.util.Dom.get("packSn").value="";
}else if(temp !=0 && (keyDownTime-temp) >400 ){ //按下第一個鍵和第二個鍵的時間間隔
//console.log((keyDownTime-temp)+((keyDownTime-temp)>400) );
M.show("error","2禁止手動輸入");
YAHOO.util.Dom.get("packSn").value="";
}else{
var theEvent = e || window.event;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if(code == 13){
//判斷回車事件處理業務邏輯//
var scrapStatus=YAHOO.util.Dom.get("scrapStatus").value;
if(scrapStatus!="PCM不良"&&scrapStatus!="ORT"){
var mask = YAHOO.util.Dom.get("maskGroup").value;
PORTAL.page.main.bussiness.getMaskGroup();
YAHOO.util.Dom.get("packSn").focus();
YAHOO.util.Dom.get("packSn").select();
}else{
PORTAL.page.main.bussiness.saveAll();
}
keyDownTime = 0;
temp = 0;
}
}
temp = keyDownTime;
});
//*********結束*********條碼輸入窗口要設置成只能條碼槍掃入,禁止鍵盤和復制粘貼的功能******************************