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

有不足一起讨论…

Logo

前往低代码交流专区

更多推荐