uniapp监听扫码枪键盘事件|无输入框式监听

一般的扫码枪通过USB或蓝牙连接手机或电脑，充当的是一个外接设备。当扫码后，扫码枪会自动识别内容，然后向连接的电脑或手机发送键盘事件keydown或keyup。

input输入框式

如果页面上有input输入框就很简单，直接聚焦input，然后扫码，input框会自动填充内容，并自动产生回车事件，代码只需处理回车事件即可。

<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框时，就需要监听页面的键盘事件。h5可以使用document.keyup来监听，但是app里没有document，只能使用plus.key来监听。处理逻辑一样，只是监听方式不一样。

同时兼容H5和APP的用法

<template><view>监听到的内容：{{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>

实际运行时，可能出现键盘的key和keyCode不兼容问题，不同的设备对应的键盘keyCode可能也不一样，首先要设置扫码枪的键盘模式，然后做一层转换。
下面的扫码枪设置为US Keyboard的转换部分逻辑

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 以下来源网络收集，不同的设备对应的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": "+" }

总结

以上是生活随笔为你收集整理的uniapp监听扫码枪键盘事件|无输入框式监听的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。