在网上找了各种方法针对与扫码枪在中文输入法的情况下键入值异常(与实际不一致的问题)有说用type=password的来模拟text框 用定位来覆盖(这种没啥用,看需要吧,因为搞完后没输入法 如果从中间去手动改这个值 定位不准确等)后来又看到一种比较靠谱的 就是监听按键速度来区分是人工还是扫码枪 这个可以识别到输入类型 但是 获取的值还是有问题(可能我打开方式不对 因为录入和监听是同步进行的 也就是说 至少录入两位才能监听到 这时候再去改输入框 type 其实录入的操作已经同步做完了 所以这种只实现了enter键能触发)
最后 通过各种的方法 各种尝试(在我有的扫码枪型号下 测试了下我的方法 字母数字组合的可以实现了 其他扫码枪不知道会不会有差异)
代码如下:通过监听来实现 判断到是扫码枪且是中文输入法 直接获取按键监听 存下来的值 去做后续操作 不是扫码枪和中文输入法 就走之前的逻辑
<template>
<input v-model="inputs"
type="text"
name="inputs"
id="inputs"
autocomplete="off"
@keydown="handleKeyUp" />
</template>
// 这是vue代码 在data中用到了 realBarcode(按键监听的存储) inputs(v-model)绑定的值 isScanningGun(是否中文下的扫码枪录入)
// 处理keyup事件
handleKeyUp(e) {
var shiftKey = e.shiftKey//为true则按了shiftKey
let keyCode=e.code
var key = e.key //其他按键key
let array = ["Q", "W", "E", "R", "T", "Y", "U",
"I", "O", "P", "A", "S", "D", "F", "G", "H", "J",
"K", "L", "Z", "X", "C", "V", "B", "N", "M",
"1","2","3","4","5","6","7","8","9","0"]
// 这种情况下 基本上是 中文输入法 才有出现
if(key=="Process"){
for (const a of array) {
// 如果匹配到是英文
if(keyCode=="Key"+a){
// 判断大小写
if(shiftKey){
this.realBarcode+=a
this.isScanningGun=true
}else{
this.realBarcode+=(a.toLowerCase())
this.isScanningGun=true
}
}else
// 如果匹配到是数字
if(keyCode=="Digit"+a){
this.realBarcode+=String(a)
this.isScanningGun=true
}
}
if(keyCode=="Enter"){
this.clickBarCode()
}
}else
// 这是英文状态下 直接判断输入的英文在没在上面大写字母中
if(array.includes(key.toUpperCase())){
this.realBarcode+=key
}else
// 这是英文状态下 直接判断输入的小写英文在没在上面大写字母中
if(array.includes(key.toUpperCase())){
this.realBarcode+=key
}else
// 这是数字 直接判断输入的数字在没在上面数字中
if(array.includes(key)){
this.realBarcode+=String(key)
}
else if(keyCode=="Enter"){
// 监听到enter触发了,执行后续事件
this.clickBarCode()
}
},