解决扫码枪因输入法中文导致的问题

最新推荐文章于 2024-05-24 14:14:20 发布

不爱敲代码的小胡

最新推荐文章于 2024-05-24 14:14:20 发布

阅读量1.5k

点赞数

文章标签： dubbo

本文链接：https://blog.csdn.net/Perback/article/details/134178332

版权

文章讲述了在项目中遇到扫码枪在搜狗、微软等输入法下中文状态下丢失字符的问题，提出了监听keydown事件的方案一和使用input[type=password]结合readonly属性的方案二，以解决输入法切换和丢失问题，同时提及了在Vue和element-ui中的实现方法。

摘要由CSDN通过智能技术生成

问题

最近公司项目上遇到了扫码枪因搜狗/微软/百度/QQ等输入法在中文状态下，使用扫码枪扫码会丢失字符的问题

思考

这种情况是由于扫码枪的硬件设备，在输入的时候，是模拟用户键盘的按键来实现的字符输入的，所以会触发输入法的中文模式，并且也会触发输入法的自动联想。那我们可以针对这个来想解决方案。

方案一

首先想到的第一种方案是，监听keydown的键盘事件，创建一个字符串数组，将每一个输入的字符进行比对，然后拼接字符串，并回填到输入框中，下面是代码：

function onKeydownEvent(e) {
  this.code = this.code || ''
  const shiftKey = e.shiftKey
  const keyCode = e.code
  const key = e.key
  const arr = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-']
  this.nextTime = new Date().getTime()
  const timeSpace = this.nextTime - this.lastTime
  if (key === 'Process') { // 中文手动输入
    if (this.lastTime !== 0 && timeSpace <= 30) {
      for (const a of arr) {
        if (keyCode === 'Key' + a) {
          if (shiftKey) {
            this.code += a
          } else {
            this.code += a.toLowerCase()
          }
          this.lastTime = this.nextTime
        } else if (keyCode === 'Digit' + a) {
          this.code += String(a)
          this.lastTime = this.nextTime
        }
      }
      if (keyCode === 'Enter' && timeSpace <= 30) {
        if (String(this.code)) {
          // TODO
          dosomething....
        }
        this.code = '