Vue中解决扫码枪在中文输入法下扫描乱码问题

写在前面

如果本文对您有所帮助，就请点个关注吧！

问题描述

今天项目上遇到反馈过来的问题：前端input输入去后台核对时，使用键盘输入核对成功，使用扫描枪输入核对失败。原因很明显：扫描枪扫出来的字符串肯定是错误的。

后续跟进反馈，中文状态下扫描枪出现这种问题。

大概猜测下，中文状态下扫描快递包裹，比如中通快递单号为：
ZT103838237398

首先说明下扫描枪的原理：完全模拟键盘输入！也就是说，扫描出来的字符串也是逐个进行输出，也是有键盘的所有监听事件的。

再看上面的快递单号：中文状态下”ZT1“会输出什么？

image.png

以上也只是猜测，因为没有实际的扫码枪。但是问题还是需要解决的。

解决思路

解决思路：不让输入中文！

<input type="text">

改为

<input type="password">

可以完全解决输入中文的问题，但是不能显示明文。再加入一个text的input框，用于显示输入，password涌入接收输入。监听input事件。具体代码如下：

<template>
  <div style="position: relative;">
    <input
      id="pad-input"
      v-model="value"
      :style="`width:${width}px;height:${height}px;`"
      type="password"
      autocomplete="off"
      @input="$emit('update', value)"
    >
    <input
      id="show"
      v-model="value"
      :style="`width:${width - 2}px;height:${height - 2}px;`"
      :placeholder="placeholder"
      type="text"
      disabled
    >
  </div>
</template>
<script>
export default {
  name: 'CodeInput',
  model: {
    prop: 'val',
    event: 'update'
  },
  props: {
    width: {
      type: Number,
      default: 240
    },
    height: {
      type: Number,
      default: 40
    },
    val: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '使用扫码枪请将光标置于此框内'
    }
  },
  data() {
    return {
      value: this.val
    }
  },
  watch: {
    val: {
      immediate: true,
      handler(newVal) {
        this.value = newVal
      }
    }
  }
}
</script>
<style lang="scss" scoped>
$placeholder-color: rgb(192, 196, 204);
#pad-input {
  border: 1px solid #dcdfe6;
  border-radius: 5px;
}
#show {
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translate(0, -50%);
  padding: 0 15px;
  background-color: #fff;
  color: #606266;
  font-size: 14px;
  border-radius: 4px;
  border: none;
  pointer-events: none;
}
input::-webkit-input-placeholder {
  color: $placeholder-color;
}
input::-moz-input-placeholder {
  color: $placeholder-color;
}
input::-ms-input-placeholder {
  color: $placeholder-color;
}
</style>