這個app項目需要做pda掃描一維碼的功能臼闻,二維碼我會搞读恃,一維碼沒接觸過隧膘。。
百度中......
這是原創(chuàng)作者的鏈接寺惫,分享給大家:
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的兼容性詳解
直接上代碼互墓,這是我用原創(chuàng)作者在我項目中實驗的一個demo,大家可以參考下蒋搜。
在這里我加入了掃描清空上次掃描結(jié)果的一個功能。
<!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">
產(chǎn)品編號:<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 // 兩次一共加起來的掃描結(jié)果
$(this).val('') // 清空輸入框內(nèi)容
lastCode = nextCode.substr(lastCode.length) // 這一次掃描結(jié)果
$(this).val(lastCode) // 給輸入框賦值最終結(jié)果
}
};
</script>
</body>
</html>
如果需要其他的校驗豆挽,可以在if (inputisbns) 中加入了你自己的特殊要求校驗
這里給大家額外推薦一些工具和實例,可以用來測試和驗證(JsBarcode)
GitHub
條碼生成器
JsBarcode示例與設(shè)置
簡單的JsBarcode演示
以上就是JS 中實現(xiàn)掃碼槍使用 [JavaScript,jQuery,一維掃碼]的方法了
如果這篇文章對你有幫助券盅,或者在進(jìn)行中遇到其他問題帮哈,歡迎評論區(qū)留言出來。
我們一起探討~