Vue项目判断Enter回车事件是直接按键盘触发还是扫码枪触发
程序员文章站
2022-06-14 20:33:01
...
Vue项目判断Enter回车事件是直接按键盘触发还是扫码枪触发
原因叙述:我们知道键盘事件包括keyDown、keyPress和keyUp三个;然后扫码触发的Enter事件是很快的,一般在10毫秒左右,而直接按键盘触发的Enter相对来说比较慢80毫秒左右。在keyDown【按下】的时候,我们记录一个keyDownTime时间,在keyUp【弹起】的时候,我们又记录一个keyUpTime时间,之后两个相减小于30毫秒【keyUpTime-keyDownTime<30】,我们可以判断是扫码触发的还是直接按键触发的。
代码如下:
1)template部分:
<el-input
v-model="courierNumber"
clearable
@keydown.enter.native="courierNumberEnterDown()"
@keyup.enter.native="courierNumberEnterUp()"
ref="courierNumber"
></el-input>
2)script部分:
// keyDownTime和keyUpTime在data定义
courierNumberEnterDown(e) {
this.keyDownTime = new Date().getTime();
},
courierNumberEnterUp(e) {
this.keyUpTime = new Date().getTime();
if (this.keyUpTime - this.keyDownTime < 30) {
//扫码枪触发
console.log("扫码Enter");
} else {
//直接按键盘触发
console.log("直接Enter");
}
},