一般的掃碼槍通過USB或藍(lán)牙連接手機(jī)或電腦，充當(dāng)?shù)氖且粋€外接設(shè)備。當(dāng)掃碼后，掃碼槍會自動識別內(nèi)容，然后向連接的電腦或手機(jī)發(fā)送鍵盤事件keydown或keyup。

input輸入框式

如果頁面上有input輸入框就很簡單，直接聚焦input，然后掃碼，input框會自動填充內(nèi)容，并自動產(chǎn)生回車事件，代碼只需處理回車事件即可。

<template><input v-model="inputString" @confirm="onConfirm" /> </template><script setup> import { ref } from "vue" const inputString = ref("") const onConfirm = () => {console.log('輸入的值為', inputString.value) } </script>

以上代碼，h5、App都適用。

無輸入框式

沒有input框時，就需要監(jiān)聽頁面的鍵盤事件。h5可以使用document.keyup來監(jiān)聽，但是app里沒有document，只能使用plus.key來監(jiān)聽。處理邏輯一樣，只是監(jiān)聽方式不一樣。

同時兼容H5和APP的用法

<template><view>監(jiān)聽到的內(nèi)容：{{inputString}}</view> </template><script setup> import { ref } from "vue" import { onLoad, onShow, onHide, onBackPress, onUnload } from "@dcloudio/uni-app"; const inputString = ref('') const keyCodeCache = ref([]) const inputCache = ref('') const onConfirm = (code)=>{console.log('拿到的code', code);// 此處寫我們自己的邏輯 } const keypress = (e) => {if (e.keyCode === 66 || e.key =='Enter') {inputString.value = inputCache.value;onConfirm(inputString.value)inputCache.value = '';} else {inputCache.value += e.key} }onLoad((options) => {// #ifdef APP-PLUSplus.key.addEventListener("keyup", keypress);// #endif // #ifdef H5document.addEventListener("keyup", keypress);// #endif }) onUnload(()=>{// #ifdef APP-PLUSplus.key.removeEventListener("keyup", keypress);// #endif// #ifdef H5document.removeEventListener("keyup", keypress);// #endif }) onHide(()=>{// #ifdef APP-PLUSplus.key.removeEventListener("keyup", keypress);// #endif// #ifdef H5document.removeEventListener("keyup", keypress);// #endif }) onBackPress(()=>{// #ifdef APP-PLUSplus.key.removeEventListener("keyup", keypress);// #endif// #ifdef H5document.removeEventListener("keyup", keypress);// #endif }) </script>

實際運行時，可能出現(xiàn)鍵盤的key和keyCode不兼容問題，不同的設(shè)備對應(yīng)的鍵盤keyCode可能也不一樣，首先要設(shè)置掃碼槍的鍵盤模式，然后做一層轉(zhuǎn)換。
下面的掃碼槍設(shè)置為US Keyboard的轉(zhuǎn)換部分邏輯

import keymap from './keymap' const keypress = (e) => {if (e.keyCode === 66 || e.key =='Enter') {inputString.value = inputCache.value;inputCache.value = '';onConfirm(inputString.value)} else {inputCache.value += keymap[e.keyCode] || ''} } // keymap.js 以下來源網(wǎng)絡(luò)收集，不同的設(shè)備對應(yīng)的keyCode可能不同 export default {"7": "0","8": "1","9": "2","10": "3","11": "4","12": "5","13": "6","14": "7","15": "8","16": "9","29": "A","30": "B","31": "C","32": "D","33": "E","34": "F","35": "G","36": "H","37": "I","38": "J","39": "K","40": "L","41": "M","42": "N","43": "O","44": "P","45": "Q","46": "R","47": "S","48": "T","49": "U","50": "V","51": "W","52": "X","53": "Y","54": "Z","55": ",","56": ".","59": "","69": "-","70": "=","81": "+" }

總結(jié)

以上是生活随笔為你收集整理的uniapp监听扫码枪键盘事件|无输入框式监听的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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