网页项目集成扫码枪设备实现一/二维码扫码识别
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博客
https://blog.xqlee.com/article/250106141956131.html
评论
相关文章
1.开通商户号
登录 https://pay.wexin.qq.com 注册并开通商户号。
2.开通【微信收款码商业版】
https://pay.wexin.qq.com 打开...
js 生成二维码引入qrcode.js该框架基于HTML5原生编写，兼容性较好。支持H5 vue uniapp 微信小程序等。基本使用参考<div id="qrcode">l;<...
centos6源码安装MySQL5.6
Spring mvc文件下载IE/Edge中文乱码解决，在spring mvc项目开发中,我们可能经常遇到文件的上传和下载操作。这里将讲解在IE/Edge浏览器中文件下载中文乱码的解决方法。
Navicat Premium 12-15导出查询结果中文乱码[已解决]
java实现生成彩色背景图片验证码，在登陆和注册可以使用，工具类将图片的IO流通过response输出到浏览器，在浏览器中可以使用
img标签的src属性路径写上该工具类的访问路径即可。
一.application.properties中文乱码问题来源 Spring Boot 项目，在默认的配置文件application.properties中配
centos7中mysql配置my.cnf字符集utf-8,mysql5.6中文乱码
环境基于openwrt/ImmortalWrt 官方在线编译器编译原因挂载自动挂载外部设备使用的默认字符集是iocharset=iso8859-1通过命令mou
情况说明webstorm 源文件中文显示乱码，同样版本的代码文件再git服务器显示正确