掃碼錄入實(shí)踐

• 實(shí)踐背景
• 需要解決的問題
• 代碼實(shí)現(xiàn)
• 最終代碼
• 結(jié)語(yǔ)

實(shí)踐背景

在近期工作過程中接手了一個(gè)讓我有些棘手的需求，需求如下：

輸入框內(nèi)支持掃碼錄入商品，且支持連續(xù)掃碼錄入。

相同輸入框中支持手動(dòng)輸入條碼錄入商品。

頁(yè)面任意位置用掃碼槍掃碼都可以成功定位到該輸入框且錄入對(duì)應(yīng)商品。

需要解決的問題

事件注冊(cè)在那里

事件注冊(cè)什么時(shí)候注冊(cè)，什么時(shí)候注銷。

如何不影響頁(yè)面上其他input元素

如何區(qū)分手動(dòng)輸入和掃碼槍錄入

代碼實(shí)現(xiàn)

事件注冊(cè)什么時(shí)候注冊(cè)，什么時(shí)候注銷
因?yàn)槲覀円?cè)的為全局事件，但是又不能影響到其他頁(yè)面所以我們可以借助vue的生命周期來(lái)注冊(cè)卸載。樓主這里因?yàn)轫?yè)面切換用的是keeplive所以我是將事件注冊(cè)放到了 created() 和 activated()中

// tips:因?yàn)閒5刷新不會(huì)觸發(fā)activated() 所以我再created中做了創(chuàng)建，但是普通加載又會(huì)觸發(fā)所以有了如下邏輯處理export default {data() {return { isCreate: false }},created() {this.isCreate = truethis.addKeyUp()},activated() {if (!this.isCreate)this.addKeyUp() },destroyed(){this.removeKeyUp()},deactivated() {this.removeKeyUp()this.isCreate = false},methods:{// 添加事件addKeyUp(){},// 刪除事件removeKeyUp(){}}}

事件注冊(cè)在那里，注冊(cè)什么事件，用什么方式注冊(cè)
(1) 因?yàn)槲覀円陧?yè)面任意位置識(shí)別并聚焦到固定的input中，所以我們需要把事件放到document上面
(2) 因?yàn)閗eydown事件按下不抬起會(huì)一直觸發(fā)，所以這里我們采用keyup事件更加友好。
(3) 我們這里使用了addEventListener注冊(cè)事件，removeEventListener來(lái)刪除事件。這兩個(gè)方法有三個(gè)參數(shù)，分別為 (“事件名”，“事件觸發(fā)的函數(shù)”，“采用捕獲還是冒泡”) 。這里我就不做贅述了，詳細(xì)說(shuō)明查看下面文檔：官方文檔 或者 相關(guān)博客例如：https://blog.csdn.net/l908825925/article/details/107865676

PS: 此處需注意一個(gè)細(xì)節(jié)，添加事件和刪除事件的所有參數(shù)必須一致，否則會(huì)導(dǎo)致無(wú)法刪除

methods:{// 添加事件addKeyUp(){document.addEventListener("keyup",this.documentKeyUp,true)}// 刪除事件removeKeyUp(){document.removeEventListener("keyup",this.documentKeyUp,true)}}

如何不影響頁(yè)面上其他input元素
因?yàn)槲覀儗⑹录?cè)到了document所以我們的keyup事件必然會(huì)影響到輸入，我們要避免中情況我們就需要禁止頁(yè)面上所有的事件冒泡，導(dǎo)致執(zhí)行document上的keyup事件觸發(fā)。那么我們?cè)趺慈ヅ袛嗄?#xff0c;我這邊采用的分析event數(shù)據(jù)中的event.srcElement.tagName來(lái)進(jìn)行判斷。每一個(gè)元素的tagName都不一樣所以我們只需要判斷我們keyup時(shí)的event.srcElement.tagName是否等于 “INPUT” || "TEXTAREA "

methods:{documentKeyUp(event){if(["INPUT","TEXTAREA"].includes(event.srcElement.tagName)) return}}

如何區(qū)分手動(dòng)輸入和掃碼槍錄入 (最為關(guān)鍵的部分)

問題分析：
這個(gè)問題我們需要從硬件去分析，首先，掃碼搶輸入特點(diǎn)為快速錄入自動(dòng)在輸入結(jié)束觸發(fā)回車，人為按鍵輸入相對(duì)掃碼槍輸入較慢，手動(dòng)觸發(fā)回車事件。那么我們從哪兒來(lái)拿到這個(gè)時(shí)間呢，通過分析event得出timeStamp字段，返回事件發(fā)生時(shí)的時(shí)間戳，掃碼槍每次錄入是8-10毫秒,手動(dòng)錄入為則在80-120毫秒左右，好一點(diǎn)的設(shè)備也會(huì)有在30毫秒左右，那么我們就可以用這個(gè)時(shí)間差來(lái)做區(qū)分手動(dòng)錄入和掃碼槍錄入。
所以代碼邏輯如下：

export default {data() {return { // 存放每次keyup事件時(shí)間戳keyUpIntervalArray: [],// 儲(chǔ)存每一次按鍵的內(nèi)容當(dāng)讓輸入框組件獲取焦點(diǎn)時(shí)拿到內(nèi)容直接錄入商品scanText:""}},methods:{documentKeyUp(event){// event.key.length>1if(["TEXTAREA","INPUT"].includes(event.srcElement.tagName) || event.key.length>1) return this.scanText = ""let temp = this.keyUpIntervalArray// 校驗(yàn)輸入let pattern = /\d|\s|[a-zA-Z]/if(pattern.test(event.key))this.scanText += event.key// 只存少量時(shí)間戳temp = util.clone(temp.splice(temp.length-5,5))temp.push(event.timeStamp)this.keyUpIntervalArray = temp// 當(dāng)儲(chǔ)存的小于按鍵事件時(shí)間戳小于2無(wú)法對(duì)比，則不做判斷if(temp.length<2) returnfor(let i in temp){let num = Math.ceil(temp[temp.length-1]) - Math.ceil(temp[temp.length-2])if(num < 20 && num !=0){this.$refs['selectGoods']?.focus(this.scanText)}}}}}

最終代碼

input 組件模塊

<el-input ref="selectGoods" v-model="searchText" @focus="selectFocus()" @keyup="keyUpEvent" /> // input組件代碼 export default {data() {return { // 存放每次keyup事件時(shí)間戳keyUpIntervalArray: [],// 儲(chǔ)存每一次按鍵的內(nèi)容當(dāng)讓輸入框組件獲取焦點(diǎn)時(shí)拿到內(nèi)容直接錄入商品scanText:""// 是否為掃碼錄入scangGun:false}},methods:{// input 函數(shù)selectFocus(){ this.$refs["selectGoods"].select() },// input 函數(shù)keyUpEvent(){if(event?.keyCode === 13 && this.searchText) this.inputGetData(this.scangGun?"":"handle")this.keyUpIntervalArray = util.clone(this.keyUpIntervalArray.splice(this.keyUpIntervalArray.length-5,5))this.keyUpIntervalArray.push(event.timeStamp)if(this.keyUpIntervalArray.length<2) returnfor(let i in this.keyUpIntervalArray){let num = Math.ceil(this.keyUpIntervalArray[this.keyUpIntervalArray.length-1]) - Math.ceil(this.keyUpIntervalArray[this.keyUpIntervalArray.length-2])this.scangGun = num < 20 && num !=0 ? true : falseif(i>0&&this.keyUpIntervalArray.length === parseInt(i)+1){if(this.scangGun) return}}}} }

document相關(guān)處理

export default {data() {return { // 存放每次keyup事件時(shí)間戳keyUpIntervalArray: [],// 儲(chǔ)存每一次按鍵的內(nèi)容當(dāng)讓輸入框組件獲取焦點(diǎn)時(shí)拿到內(nèi)容直接錄入商品scanText:"",// 是否通過create生命周期isCreate: false}},created() {this.isCreate = truethis.addKeyUp()},activated() {if (!this.isCreate) this.addKeyUp() },destroyed(){this.removeKeyUp()},deactivated() {this.removeKeyUp()this.isCreate = false},methods:{// 添加事件addKeyUp(){document.addEventListener("keyup",this.documentKeyUp,true)},// 刪除事件removeKeyUp(){document.removeEventListener("keyup",this.documentKeyUp,true)}，// document事件處理documentKeyUp(event){// event.key.length>1if(["TEXTAREA","INPUT"].includes(event.srcElement.tagName) || event.key.length>1) return this.scanText = ""let temp = this.keyUpIntervalArray// 校驗(yàn)輸入let pattern = /\d|\s|[a-zA-Z]/if(pattern.test(event.key))this.scanText += event.key// 只存少量時(shí)間戳temp = util.clone(temp.splice(temp.length-5,5))temp.push(event.timeStamp)this.keyUpIntervalArray = temp// 當(dāng)儲(chǔ)存的小于按鍵事件時(shí)間戳小于2無(wú)法對(duì)比，則不做判斷if(temp.length<2) returnfor(let i in temp){let num = Math.ceil(temp[temp.length-1]) - Math.ceil(temp[temp.length-2])if(num < 20 && num !=0) this.$refs['selectGoods']?.focus(this.scanText)}}}}

PS: 補(bǔ)充內(nèi)容：

1、中文輸入法掃碼槍掃碼會(huì)導(dǎo)致很多鍵位識(shí)別為229。導(dǎo)致無(wú)法識(shí)別設(shè)備回車。 2、部分老式掃碼槍在中文大寫模式下錄入完成最后一個(gè)鍵位code不是13（回車），而是20（Caps_Lock， 大小寫切換）

結(jié)語(yǔ)

該文章是為個(gè)人的思路及實(shí)現(xiàn)的實(shí)踐總結(jié)，代碼并不嚴(yán)謹(jǐn)優(yōu)雅，希望對(duì)各位開發(fā)者有所啟發(fā)，若有不足還望多多指教。

總結(jié)

以上是生活随笔為你收集整理的js通过扫描枪快速扫码录入的功能实现(区分手动输入和扫码枪录入)-pc的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。