输入框禁止手动输入,只允许扫描枪扫入
功能要求:输入框禁止手动输入,只允许扫描枪扫入
主要问题:
扫码枪就是模拟键盘的输入,实际上和手动输入的没有区别
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;
});
//*********结束*********条码输入窗口要设置成只能条码枪扫入,禁止键盘和复制粘贴的功能******************************
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾(3.3-3.9)
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」