使用JavaScript獲取掃碼槍掃描得到的條形碼的思路代碼詳解
下面通過實(shí)例代碼給大家介紹js掃碼槍掃描條形碼的實(shí)現(xiàn)方法,具體代碼如下所示:
var keycode = ''; var lastTime=null,nextTime; var lastCode=null,nextCode;document.οnkeydοwn=function(e){if(window.event){// IEnextCode = e.keyCode} else if(e.which){// Netscape/Firefox/OperanextCode = e.which}//+鍵,增加新數(shù)據(jù)行if(nextCode==107 || nextCode==187){addNewGoodLine();} //-鍵,刪除最后一條數(shù)據(jù)行else if(nextCode==109 || nextCode==189){$('.new_products:last').remove();}//字母上方 數(shù)字鍵0-9 對(duì)應(yīng)鍵碼值 48-57//數(shù)字鍵盤 數(shù)字鍵0-9 對(duì)應(yīng)鍵碼值 96-105else if((nextCode>=48&&nextCode<=57) || (nextCode>=96&&nextCode<=105)){//數(shù)字鍵盤的鍵碼值對(duì)應(yīng)的字符有問題,所以手動(dòng)調(diào)整鍵碼值var codes = {’48’:48,’49’:49,’50’:50,’51’:51,’52’:52,’53’:53,’54’:54,’55’:55,’56’:56,’57’:57, ’96’:48,’97’:49,’98’:50,’99’:51,’100’:52,’101’:53,’102’:54,’103’:55,’104’:56,’105’:57};nextCode = codes[nextCode];nextTime = new Date().getTime(); if(lastCode == null && lastTime == null) { keycode = String.fromCharCode(nextCode); } else if(lastCode != null && lastTime != null && nextTime - lastTime <= 30) { keycode += String.fromCharCode(nextCode); } else{keycode = ''; lastCode = null; lastTime = null;} lastCode = nextCode; lastTime = nextTime;}//13 為按鍵Enterelse if(nextCode==13 && keycode!= ''){var code = $('.new_products:last .code').val();if(code != ''){//最后一行已錄入數(shù)據(jù),重新生成新行addNewGoodLine();}$('.new_products:last .code').val(keycode).blur();keycode = ''; lastCode = null; lastTime = null;}}function addNewGoodLine(){//生成新數(shù)據(jù)行var html = ’<tr class='new_products'>’;html += ’<td></td>’;html += ’<td>’;html += ’<input type='text' οnblur='getProductDetail()' />’;html += ’</td>’;html += ’</tr>’;}function getProductDetail(){//獲取商品的詳細(xì)信息,然后賦值}
思路:
1.注冊(cè)onkeydown事件,捕獲數(shù)字鍵的按下事件
2.計(jì)算按下數(shù)字鍵的時(shí)間間隔,若間隔小于30毫秒,則為掃碼槍輸入
3.捕獲Enter案件的按下事件,判斷捕獲的掃碼槍輸入數(shù)值是否為空,不為空,對(duì)相應(yīng)的文本框賦值,同時(shí)觸發(fā)按找條形碼查找商品的方法
總結(jié)
到此這篇關(guān)于使用JavaScript獲取掃碼槍掃描得到的條形碼的思路代碼詳解的文章就介紹到這了,更多相關(guān)js掃碼槍掃描條形碼內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. python 實(shí)現(xiàn)圍棋游戲(純tkinter gui)2. Python加載數(shù)據(jù)的5種不同方式(收藏)3. python 基于Appium控制多設(shè)備并行執(zhí)行4. python如何實(shí)現(xiàn)word批量轉(zhuǎn)HTML5. 利用單元測試對(duì)PHP代碼進(jìn)行檢查6. python excel和yaml文件的讀取封裝7. Java8內(nèi)存模型PermGen Metaspace實(shí)例解析8. python3實(shí)現(xiàn)往mysql中插入datetime類型的數(shù)據(jù)9. moment轉(zhuǎn)化時(shí)間戳出現(xiàn)Invalid Date的問題及解決10. python爬蟲實(shí)戰(zhàn)之制作屬于自己的一個(gè)IP代理模塊
