这个app项目需要做pda扫描一维码的功能,二维码我会搞,一维码没接触过。。
百度中......
这是原创作者的链接,分享给大家:
https://blog.csdn.net/Khun_HWJ/article/details/110916355
涉及知识:通过keydown获取到HTML DOM Event 对象
event包含的属性中event.keyCode、event.charCode和event.which都可以获知按下了哪个键盘按键,其中包含了浏览器兼容性问题可参考这篇文章:
js键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
直接上代码,这是我用原创作者在我项目中实验的一个demo,大家可以参考下。
在这里我加入了扫描清空上次扫描结果的一个功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="../css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/baseUrl.js" type="text/javascript" charset="utf-8"></script>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
产品编号:<input type="text" name="productNumber" id="productNumber" placeholder="13位" />
</div>
<script type="text/javascript">
// 第一步:获取input框id,并聚焦
var myInputISBN = document.getElementById('productNumber');
$('#productNumber').focus();
var lastTime = null,
lastCode = '',
nextCode = ''
// 书本编码扫码
var lastTime = null;
myInputISBN.onkeydown = function(e) {
let keycode = e.keyCode || e.which || e.charCode;
var nextTime = new Date();
if (keycode === 13) {
if (lastTime && (nextTime - lastTime < 300)) {
return;
} else {
lastTime = nextTime;
}
nextCode = myInputISBN.value // 两次一共加起来的扫描结果
$(this).val('') // 清空输入框内容
lastCode = nextCode.substr(lastCode.length) // 这一次扫描结果
$(this).val(lastCode) // 给输入框赋值最终结果
}
};
</script>
</body>
</html>
如果需要其他的校验,可以在if (inputisbns) 中加入了你自己的特殊要求校验
这里给大家额外推荐一些工具和实例,可以用来测试和验证(JsBarcode)
GitHub
条码生成器
JsBarcode示例与设置
简单的JsBarcode演示
以上就是JS 中实现扫码枪使用 [JavaScript,jQuery,一维扫码]的方法了
我们一起探讨~