vue input判断值是扫码枪还是键盘输入
程序员文章站
2022-06-14 20:17:37
...
首先了解下为啥要做区分 :在浏览器端 我们没办法去控制 输入法为中文还是其他状态 这时候 如果在中文情况下我们用扫码枪去扫码可能就会偏离我们的预期 因为中文状态下 enter会用在把输入信息键入输入框而导致不会执行我们绑定的enter事件 (亲身经历 真的是各种找方案解决,有时输入时间差来判断的 有模拟输入框来判断的) 在尝试后 能满足的 也就输入时间差会靠谱些
扫码枪输入的时间间隔一般在8毫秒,偶尔会有16毫秒,而键盘输入一般都在80毫秒以上(大概范围),因此我设定当输入间隔小于等于40毫秒时,判断为扫码枪输入,这时候 我就切换输入框type类型为password类型 否则为text 然后在执行enter事件的时候又恢复为text 初始一下
实现流程
template:
<input
v-model="inputs"
:type="isScanningGun?'password':'text'"
name=""
id="inputs"
placeholder="请扫描条码"
@keyup="keydownBarcode()"
@keydown.enter="clickBarCode(inputs)" />
data:
inputs: "", //条码扫码保存的数据
timearr : [0,0],//扫条码记录间隔时长用来判断是不是扫码枪
isScanningGun:false,//判断是否扫码枪
methods:
/**
* @title: 录入条码执行的事件
* @description:
* @auther: 田保平
* @param {String}} inputs 条码
* @return {*}
*/
clickBarCode(inputs) {
// 先初始化输框为text
this.isScanningGun=false
//下面执行其他操作
..........
},
keydownBarcode(){
if(this.inputs.length%2 != 0 ){
//求余数不为0是奇数
this.timearr[0] = new Date().getTime();
}else{
this.timearr[1] = new Date().getTime();
}
//当输入第二位时判断两次输入的间隔,判断是否为手动输入,间隔过长就是手动
if(this.inputs.length > 1 && Math.abs(this.timearr[1] - this.timearr[0])<40){
this.isScanningGun=true
}
},