淺談在react中如何實現(xiàn)掃碼槍輸入-創(chuàng)新互聯(lián)

觸發(fā)原理

成都創(chuàng)新互聯(lián)公司專注于網(wǎng)站建設|成都網(wǎng)站改版|優(yōu)化|托管以及網(wǎng)絡推廣，積累了大量的網(wǎng)站設計與制作經(jīng)驗，為許多企業(yè)提供了網(wǎng)站定制設計服務，案例作品覆蓋成都集裝箱等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身開發(fā)品質(zhì)網(wǎng)站。

原理就是監(jiān)聽鍵盤輸入，比如掃一個為6970596130126的69條形碼，用掃碼槍掃一下會在光標位置依次輸出：

6
9
7
0
5
9
6
1
3
0
2
6

但這不是完整的，所以需要寫一個函數(shù)scanEvent來整理收集到的每個編號。

let code = '';
let lastTime,
  nextTime,
  lastCode,
  nextCode;


function scanEvent(e, cb) {
  nextCode = e.which;
  nextTime = new Date().getTime();

  if (lastCode != null && lastTime != null && nextTime - lastTime <= 30) {
    code += String.fromCharCode(lastCode);
  } else if (lastCode != null && lastTime != null && nextTime - lastTime > 100) {
    code = '';
  }

  lastCode = nextCode;
  lastTime = nextTime;
  if (e.which === 13) {
    cb(code);
    console.log('code', code);
    code = '';
  }
}

export { scanEvent };

本文名稱：淺談在react中如何實現(xiàn)掃碼槍輸入-創(chuàng)新互聯(lián)
分享鏈接：http://www.jbt999.com/article48/eephp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、虛擬主機、營銷型網(wǎng)站建設、全網(wǎng)營銷推廣、Google、網(wǎng)站導航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)