欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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");
   }
 },

有不足一起讨论…