uniapp监听扫码枪键盘事件|无输入框式监听-Toy模板网

这篇具有很好参考价值的文章主要介绍了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-PLUS
    plus.key.addEventListener("keyup", keypress);
    // #endif 
    // #ifdef H5
    document.addEventListener("keyup", keypress);
    // #endif
})
onUnload(()=>{
    // #ifdef APP-PLUS
    plus.key.removeEventListener("keyup", keypress);
    // #endif
    // #ifdef H5
    document.removeEventListener("keyup", keypress);
    // #endif
})
onHide(()=>{
    // #ifdef APP-PLUS
    plus.key.removeEventListener("keyup", keypress);
    // #endif
    // #ifdef H5
    document.removeEventListener("keyup", keypress);
    // #endif
})
onBackPress(()=>{
    // #ifdef APP-PLUS
    plus.key.removeEventListener("keyup", keypress);
    // #endif
    // #ifdef H5
    document.removeEventListener("keyup", keypress);
    // #endif
})
</script>

实际运行时，可能出现键盘的key和keyCode不兼容问题，不同的设备对应的键盘keyCode可能也不一样，首先要设置扫码枪的键盘模式，然后做一层转换。
下面的扫码枪设置为US Keyboard的转换部分逻辑文章来源地址https://www.toymoban.com/news/detail-507918.html

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监听扫码枪键盘事件|无输入框式监听的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！