网页项目集成扫码枪设备实现一/二维码扫码识别
demo
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>scan demo</title>
</head>
<body>
<input type="text" id="sn">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
var qrResult = "";
$(document).keydown(function(event){
if( event.key==="Enter" ){
let readResult = qrResult; // qrResult 扫码枪自动装载内容
qrResult = "";
if(readResult!==undefined || readResult!==""){
// 业务流程
alert(readResult)
$('#sn').val(readResult) //设置值
}
}else {
qrResult = qrResult + event.key;
}
});
</script>
</body>
</html>可能遇到的问题
窗口焦点问题
当在当前页面加载完成后，如果用户并未在此页面有任何操作，由于当前焦点并不在此窗口，所以此时扫码枪的输入信号并不会被监听，业务流程也无法被正常执行。
解决办法为：增加必要的提示和页面交互操作，比如在本页面做出提示，要求用户在本页面至少进行一次点击或其他交互后方能使用扫码枪。
输入法中文模式问题
本文实现的处理流程并不是直接录入型的，当用户在页面有一个文本输入控件（如：input、textaera等）时，如果当前输入法处于中文输入模式时，扫码枪的回传信息将等同于键盘逐字点击操作。
举个例子：
识别结果为：id=1，当输入法为中文时，最终通过扫码枪输入到输入控件的结果很可能是如 “i的” 的输入法软件处理后的结果。下图展示了我本地的模拟结果。
解决办法为：根据实际情况在开发中指定输入控件的输入类型和输入范围。
参考：在网页项目中集成扫码枪设备，实现二维码扫码识别实战_扫码枪对接web-CSDN博客
http://blog.xqlee.com/article/250106141956131.html
评论
相关文章
js 生成二维码引入qrcode.js该框架基于HTML5原生编写，兼容性较好。支持H5 vue uniapp 微信小程序等。基本使用参考<div id="qrcode">l;<...
1.打开github nodejs源码地址GitHub - nodesource/distributions: NodeSource Node.js Binary Distributions2....
简介Spring Cloud Gateway中的全局异常处理不能直接用@ControllerAdvice来处理，通过跟踪异常信息的抛出，找到对应的源码，自定义一些处理逻辑来符合业务的需求
学习创建和配置使用JSP 模板文件渲染视图层的Spring Boot jsp 视图解析器
尽管现在前端技术发展飞速发展，各种技术迭代很快，但jQuery还是在一些企业站或者简单网页尝尝用到，本文记录一下学写jQuery插件的内容，愿新手共勉，共同进步
使用jQuery判断元素是否在可视区域 $("#app").offset().top; offset().top表示 绝对偏移值，比如说有一个很长的页面，#ap
在初始化的Vue项目中，我们最先接触到的就是main.js，App.vue，index.html这三个文件，从下面创建的一个空白项目中可以看到：关于三个文件的说明如下：index.html---主页
一、简介HTML5引入了 history.pushState() 和 history.replaceState() 方法，它们分别可以添加和修改历史记录条目。这
Promise 的含义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了
artDialog v7 使用说明及API文档,artDialog ,artDialog具有bootstrap风格的弹窗组件