前端 回车事件和失焦事件同时触发的问题

397 阅读1分钟

** 我在项目中遇到一个问题,需要在第一个文本框扫码后回车执行第二个文本框扫码时,因为在工厂中运用扫码枪时可以触发回车事件,但还有一种可能是工人手动输入码时,可能就不会操作回车直接将鼠标聚焦到下一文本框,这个时候就不会触发我回车事件中的验证接口**

例如这样 但是当我这样写,就会出现一个问题,事件会执行俩次

<el-form-item label="货位编码" prop="storageSpaceCode">
      <el-input
           v-model.trim="putaway.storageSpaceCode"
           maxlength="50"
           show-word-limit
           @keyup.native.enter="onEnter"
           @blur="onEnter">
       </el-input>
</el-form-item>
  • 网上查了很多,常见的解决方法就是将回车事件指向当前元素的失焦事件
<el-form-item label="货位编码" prop="storageSpaceCode">
      <el-input
           v-model.trim="putaway.storageSpaceCode"
           maxlength="50"
           show-word-limit
           @keyup.native.enter="$event.target.blur"
           @blur="onEnter">
       </el-input>
</el-form-item>
  • 然后我又搞了一种方法
<el-form-item label="货位编码" prop="storageSpaceCode">
      <el-input
           v-model.trim="putaway.storageSpaceCode"
           maxlength="50"
           show-word-limit
           @keyup.native.enter="onEnter"
           @blur.native.capture="onEnter">
       </el-input>
</el-form-item>

这样也可以完美解决!!!