javascript扫码枪的判断输入

最新推荐文章于 2024-03-15 20:07:10 发布
最新推荐文章于 2024-03-15 20:07:10 发布
阅读量2w 收藏 13
点赞数 1
分类专栏： javascript 文章标签： javascript 扫码枪
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/phoenix_shine/article/details/70245444
版权

设计思路：

扫码枪本质上来讲是一种输入设备，和键盘没有任何区别，因此如何实现对扫码枪的判断是一个难点。

另外一个难点在于如何在不使用文本框监听的情况下实现对扫码枪的监听与输入。

关于以上两点，首先，可以通过判断输入时间间隔来判断究竟是扫码枪还是键盘，经过我的实测，扫码枪输入的时间间隔一般在8毫秒，偶尔会有16毫秒，而键盘输入一般都在80毫秒以上，因此我设定当输入间隔小于等于30毫秒时，判断为扫码枪输入；其次，可以通过对document的onKeyPress事件进行监听判断输入，至于为何要使用onKeyPress事件而不是onKeyDown或者onKeyUp进行监听，是因为只有通过onKeyPress事件监听按键才能准确的还原键盘码，这一点我在chrome已经实测过了。

<%
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
  <head>
    <script type="text/javascript" src="<%=basePath%>/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
    	window.onload = function(e) {
    		var codeString = "";
    		var lastTime;
    		document.onKeyPress = function(e) {
    			var code = e.which;
    			var nextTime = new Date().getTime();
    		
    			if(nextTime - lastTime <= 30) {
    				codeString += String.fromCharCode(code);
    			}
    			lastTime = nextTime;
    		};
    		
    		$(this).keypress(function(e) {
    			if(e.which == 13) {
    				alert(codeString);//do something
    				codeString = "";//回车输入后清空
			}
 }); } </script> </head>





以上是我的第一种思路，这个思路有一个缺点，就是会丢失扫码枪扫描的第一个字符，因此我对第一种思路进行了改进:


<%
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
  <head>
    <script type="text/javascript" src="<%=basePath%>/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
    	window.onload = function(e) {
		var code = "";
    		var lastTime,nextTime;
    		var lastCode,nextCode;
    		document.onKeyPress = function(e) {
    			nextCode = e.which;
    			nextTime = new Date().getTime();
    		
    			if(lastCode == null && lastTime == null) {
    				
    			} if(lastCode != null && lastTime != null && nextTime - lastTime <= 30) {
    				code += String.fromCharCode(code);
    			} else if(lastCode != null && lastTime != null && nextTime - lastTime > 1000) {
    				code = "";//超时清空
    			}
    			lastCode = nextCode;
    			lastTime = nextTime;
    		};
    		
    		$(this).keypress(function(e) {
    			if(e.which == 13) {
    				alert(code);
    				code = "";//回车输入后清空
    			}
    		});
    	}
    </script>
  </head>








                

        

        

    




    

      

        

            

              
                
                  洋蒸鱼
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    13
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  5
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解

				
			

			

				

					11-20
				

			

		

		

			
				
下面通过实例代码给大家介绍js扫码枪扫描条形码的实现方法，具体代码如下所示：

 var keycode = "";
  var lastTime=null,nextTime;
  var lastCode=null,nextCode;
	document.οnkeydοwn=function(e){
		if(window.event){
			// IE
			nextCode = e.keyCode
		} else if(e.which){
			// Netscape/Firefox/Opera
			nextCode = e.which
		}
		//+键，增加新数据行
		if

			
		

	



                

              
                



	

		

			

				
					
JS判断是键盘输入还是扫码枪输入

				
			

			

				

					chwlallen的专栏
				

				

					03-13
					
					2191
					
				

			

		

		

			
				
JS实现扫码枪输入

			
		

	



                


  
              

                


	

		

			

				
					
判断是否是扫码枪

				
			

			

				

					JolyouLu的博客
				

				

					01-18
					
					938
					
				

			

		

		

			
				
$(’#deviceCode’).on(“keydown”, (e) => {
now = new Date();
if (now - start > 50) {
start = now;
code = String.fromCharCode(e.keyCode);
console.log(code);
} else {
code += String.fromCharCode(e.ke...

			
		

	





	

		

			

				
					
纯前端 JS 实现扫码+身份证识别，隔壁程序员都馋哭了！

					
最新发布

				
			

			

				

					agions的博客
				

				

					03-15
					
					637
					
				

			

		

		

			
				
好了，今天的分享就到这里啦！如果你在实践过程中遇到了任何问题，别忘了在评论区留言哦，大家一起交流探讨，共同进步！想象一下，你可以轻松地用 JavaScript 扫描二维码，并且还能识别身份证信息，这是多么酷炫的事情啊！只需要调用相应的库函数，就能轻松获取二维码中的信息。这可不是一般的厉害，隔壁的程序员都馋哭了！确保你的前端环境已经搭建好，然后引入一些必要的库，比如。元素将身份证图片进行处理，然后再运用相关的识别库来提取出有用的信息。最后，记得给你的代码加上一些注释，让其他小伙伴也能轻松理解你的杰作。

			
		

	



		

			
		



	

		

			

				
					
js 扫码枪功能面向对象封装

				
			

			

				

					我们明天会更好的博客
				

				

					07-14
					
					591
					
				

			

		

		

			
				
1、Scan类创建
/**
 * @description 封装扫码对象
 * @param {Object} {onchange: function(code) {}} 回调函数
 */

class Scan {
  constructor({ onchange = null }) {
    this.code = '';
    this.lastTime = '';
    this.nextTime = '';
    this.lastCode = '';
    this.nextCode 

			
		

	





	

		

			

				
					
vue input判断值是扫码枪还是键盘输入

				
			

			

				

					createWrite的博客
				

				

					08-02
					
					2172
					
				

			

		

		

			
				
首先了解下为啥要做区分 ：在浏览器端 我们没办法去控制 输入法为中文还是其他状态 这时候 如果在中文情况下我们用扫码枪去扫码可能就会偏离我们的预期 因为中文状态下 enter会用在把输入信息键入输入框而导致不会执行我们绑定的enter事件 （亲身经历 真的是各种找方案解决，有时输入时间差来判断的 有模拟输入框来判断的） 在尝试后 能满足的 也就输入时间差会靠谱些

扫码枪输入的时间间隔一般在8毫秒，偶尔会有16毫秒，而键盘输入一般都在80毫秒以上（大概范围），...

			
		

	





	

		

			

				
					
扫描枪事件监听代码（关键字：浏览器、二维码、条形码、H5、Javascript、Web、史上最好的浏览器扫描枪监听代码）

				
			

			

				

					weixin_54578996的博客
				

				

					09-20
					
					1257
					
				

			

		

		

			
				
扫描枪事件监听，关键字：浏览器、二维码、条形码、H5、Javascript、Web、jQuery、代码

			
		

	





	

		

			

				
					
JS 中实现扫码枪使用 [JavaScript,jQuery,一维扫码]

					
热门推荐

				
			

			

				

					鸿仔的博客
				

				

					09-22
					
					9万+
					
				

			

		

		

			
				
前言：

首先是条码扫描头在设备管理器中可以看到就是一个键盘设备。

然后各家厂商都可以设置扫描结果设置自定义前缀后缀，搜索设备型号找到文档，扫描指定的设置码即可，我这边使用的是Honeywell(霍尼韦尔)MS5145条码阅读器的默认设置，

即扫描成功后(发出滴声 可关闭) 键盘自动输入：扫描结果（条码）+ 回车。



代码主要是利用JS中的键盘监听事件，然后设置定时器去校验。

然后我的业务需求是13位的纯数字的商品编号条码和16位的数字加字母的MAC地址，在同一页面实现扫码自动输入(输入前...

			
		

	





	

		

			

				
					
JS监听扫描枪内容

				
			

			

				

					滕青山博客
				

				

					08-30
					
					1224
					
				

			

		

		

			
				
扫描枪就相当于键盘，扫描二维码/一维码识别为文字后输入到电脑上，并且可以设置按下回车键。1、进入页面后，输入框默认获取焦点。2、扫码枪输入内容后，执行查询逻辑。

			
		

	





	

		

			

				
					
js前端获取扫码枪扫描的数据，打印条形码，批量打印

				
			

			

				

					前端菜鸟好先森的博客
				

				

					11-21
					
					5545
					
				

			

		

		

			
				
js前端获取扫码枪扫描的数据，打印条形码，批量打印。实现扫码溯源的功能

			
		

	





	

		

			

				
					
js通过扫描枪快速扫码录入的功能实现(区分手动输入和扫码枪录入)-pc

				
			

			

				

					白开水丶
				

				

					09-13
					
					6001
					
				

			

		

		

			
				
扫码录入实践实践背景需要解决的问题代码实现最终代码结语
实践背景
在近期工作过程中接手了一个让我有些棘手的需求，需求如下：

输入框内支持扫码录入商品，且支持连续扫码录入。
相同输入框中支持手动输入条码录入商品。
页面任意位置用扫码枪扫码都可以成功定位到该输入框且录入对应商品。

需要解决的问题

事件注册在那里
事件注册什么时候注册，什么时候注销。
如何不影响页面上其他input元素
如何区分手动输入和扫码枪录入

代码实现

事件注册什么时候注册，什么时候注销
因为我们要注册的为全局事件，但是又不能影响

			
		

	





	

		

			

				
					
js 获取扫码枪输入数据的方法

				
			

			

				

					11-20
				

			

		

		

			
				
1、扫码枪相当于键盘输入设备，输入一连串数字后加一个enter键。但在实际开发中需要区分是扫描枪输入还是键盘用户输入，区别在于扫码枪输入很快。

 let code = '';
   let lastTime, nextTime;
   let lastCode, nextCode;
   [removed] = (e) => {
    if (window.event) { // IE
     nextCode = e.keyCode;
    } else if (e.which) { // Netscape/Firefox/Opera
     ne

			
		

	





	

		

			

				
					
JavaScript集成光标扫码枪

				
			

			

				

					07-06
				

			

		

		

			
				
1.页面js集成扫码枪扫码录入功能 2.避免鼠标误操作 3.控制键盘误操作 4.键盘大写锁问题 5.中文输入法问题规避 6.隐藏不显示光标扫码方式

			
		

	





	

		

			

				
					
JS实现扫码枪扫描二维码功能

				
			

			

				

					11-28
				

			

		

		

			
				
扫码枪扫描二维码，具体内容如下所示： 业务需求要将数据生成二维码，并用扫码枪扫出数据上传到服务端。 先上代码吧，之后再完善注意点  this.start = new Date().getTime()  let code = ''  let lastTime, nextTime...

			
		

	





	

		

			

				
					
JavaScript 密码强度判断代码

				
			

			

				

					10-29
				

			

		

		

			
				
JavaScript 密码强度判断代码，其实就是利用了判断一些特殊符号，字符串长度等来实现判断。

			
		

	





	

		

			

				
					
Scanner:WEB调用扫描枪进行扫码录入

				
			

			

				

					05-15
				

			

		

		

			
				
HTML5扫描枪录入工具自动识别来自扫描枪录入的条码并进行提交，屏蔽来自键盘的录入。版本号命名规则X: 版本号, Y: 修订号, Z: 迭代次数如：Ver.X.Y.Z 代表第X版，第Y次修订，第Z次迭代。开源声明Given enough ...

			
		

	





	

		

			

				
					
【转】C#中判断扫描枪输入与键盘输入

				
			

			

				

					weixin_30404405的博客
				

				

					05-18
					
					144
					
				

			

		

		

			
				
提出问题：在收货系统中，常常要用到扫描枪扫描条码输入到TextBox，当条码无法扫描时，需要手工输入。如果是扫描枪输入时，我们将自动去判读条码，而手工输入时，最终需要加按回车键确认后判读条码。这时候我们就要判断输入设备是手工还是扫描枪。尝试的方法：
1.将TextBox属性设为ReadOnly=true。结果：无法输入。
2.在TextBox的KeyPress事件中设置属性e.handle=t...

			
		

	





	

		

			

				
					
JS解析扫码枪

				
			

			

				

					化名三爷
				

				

					04-11
					
					1157
					
				

			

		

		

			
				
废话不多说，直接上代码，这个方法避免了首字缺失，字符串乱码等等问题，特别好用，记录一下


	<script>
		window.onload = (e)=> {
			this.start = new Date().getTime()
			let code = ''
			let lastTime, nextTime
			let lastCode, nextCode
		...

			
		

	





	

		

			

				
					
js判断扫码枪扫描的值的解决办法

				
			

			

				

					qq_37957866的博客
				

				

					11-27
					
					5179
					
				

			

		

		

			
				
思路：监听页面上所有的keypress事件,根据扫码枪录入的速度跟正常人为输入的速度，也就是时间间隔对比。来判断是不是扫码枪录入。问题是判断第一个输入的值是人还是扫码枪。所以在下面处理中，不管人输入还是扫码枪，都会记录第一个值。通过判断第二个输入值是不扫码枪即可。是，就拼接code字符串，不是则清零并将当前值作为第一个输入值。


var code = "";
var lastTime,nextT...

			
		

	





	

		

			

				
					
js 扫码枪输入数据 累加

				
			

			

				

					07-23
				

			

		

		

			
				
### 回答1：
使用JavaScript编写扫码枪输入数据累加的代码非常简单。我们可以通过监听输入事件来获取扫码枪输入数据，并在每次输入时将数据累加到一起。

首先，需要在HTML文件中创建一个文本框和一个显示累加结果的元素，如下所示：

```html
<input type="text" id="input" />
<p id="result"></p>
```

然后，在JavaScript代码中获取输入框和结果显示元素的引用，并添加一个输入事件监听器：

```javascript
const input = document.getElementById('input');
const result = document.getElementById('result');
let sum = 0;

input.addEventListener('input', function(event) {
  const value = parseInt(event.target.value);
  if (!isNaN(value)) {
    sum += value;
    result.textContent = '累加结果：' + sum;
  }
});
```

这段代码首先定义了一个变量`sum`来保存累加结果的值，并设置初始值为0。然后，使用`addEventListener`方法添加了一个输入事件监听器，在每次输入事件发生时调用匿名函数。

在匿名函数中，首先通过`event.target.value`获取输入的值，并使用`parseInt`将其转换为整数类型。然后，检查转换后的值是否为有效的数字，若是，将其累加到`sum`中，并更新结果显示元素的文本内容。

最后，将JavaScript代码放置在HTML文件的`<script></script>`标签中，或者将其保存为一个单独的`.js`文件并通过`<script src="script.js"></script>`的方式引入。

这样，当用户使用扫码枪输入数据时，累加结果会实时显示在页面上。  

### 回答2：
在JavaScript中，可以通过监听扫码枪的输入事件来获取扫码枪输入的数据，并进行累加操作。下面是一个简单的示例代码：

```javascript
// 假设页面上有一个用于显示累加结果的文本框
var resultInput = document.getElementById('result');

// 初始化累加结果为0
var sum = 0;

// 监听扫码枪的输入事件
document.addEventListener('keydown', function(event) {
  // 获取键盘按下的字符
  var char = String.fromCharCode(event.keyCode);

  // 判断是否为数字
  if (/^\d$/.test(char)) {
    // 将输入的数字累加到结果上
    sum += parseInt(char);

    // 更新文本框的值
    resultInput.value = sum;
  }
});
```

在上述代码中，我们通过addEventListener方法监听了keydown事件，当有键盘按键被按下时触发该事件。然后判断按下的键是否为数字，并将数字累加到sum变量中。最后更新显示累加结果的文本框的值。

这样，当你使用扫码枪输入数字时，脚本会将输入的数字累加起来，并实时更新在页面上。  

### 回答3：
使用JavaScript编写代码来实现扫码枪输入数据的累加非常简单。下面是一个示例代码：

```javascript
// 初始化累加器
let sum = 0;

// 监听扫码枪输入事件
document.addEventListener('keydown', function(event) {
  // 检查输入的键值是否为数字键
  if (event.key >= '0' && event.key <= '9') {
    // 将输入的数字转换为整数，并累加到总和上
    sum += parseInt(event.key);
  }
});

// 输出累加结果
console.log('当前累加结果为:', sum);
```

上述代码通过使用`document`对象的`addEventListener`方法来监听键盘按下事件，然后检查输入的键值是否为数字键。如果是数字键，则将输入的数字转换为整数，并累加到`sum`变量上。最后，通过`console.log`方法输出累加结果。

你可以将上述代码放在HTML文件中的`<script>`标签内，并在浏览器中运行该文件。然后，当你使用扫码枪扫描条形码时，输入的数字将被累加到`sum`变量上，并在控制台上显示累加结果。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 5

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值