記錄--解決掃碼槍因輸入法中文導致的問題

来源:https://www.cnblogs.com/smileZAZ/archive/2023/10/08/17749851.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 問題 最近公司項目上遇到了掃碼槍因搜狗/微軟/百度/QQ等輸入法在中文狀態下，使用掃碼槍掃碼會丟失字元的問題 思考 這種情況是由於掃碼槍的硬體設備，在輸入的時候，是模擬用戶鍵盤的按鍵來實現的字元輸入的，所以會觸發輸入法的中文模式，並且也會 ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

問題

最近公司項目上遇到了掃碼槍因搜狗/微軟/百度/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 = ''
        this.nextTime = 0
        this.lastTime = 0
      }
    }
  } else {
    if (arr.includes(key.toUpperCase())) {
      if (this.lastTime === 0 && timeSpace === this.nextTime) {
        this.code = key
      } else if (this.lastTime !== 0 && timeSpace <= 30) {
        // 30ms以內來區分是掃碼槍輸入，正常手動輸入時少於30ms的
        this.code += key
      }
      this.lastTime = this.nextTime
    } else if (arr.includes(key)) {
      if (this.lastTime === 0 && timeSpace === this.nextTime) {
        this.code = key
      } else if (this.lastTime !== 0 && timeSpace <= 30) {
        this.code += String(key)
      }
      this.lastTime = this.nextTime
    } else if (keyCode === 'Enter' && timeSpace <= 30) {
      if (String(this.code)) {
        // TODO
        dosomething()
      }
      this.code = ''
      this.nextTime = 0
      this.lastTime = 0
    } else {
      this.lastTime = this.nextTime
    }
  }
}

這種方案能解決部分問題，但是在不同的掃碼槍設備，以及不同輸入法的情況下，還是會出現丟失問題

方案二

使用input[type=password]來相容不同輸入的中文模式，讓其只能輸入英文，從而解決丟失問題

這種方案網上也有不少的參考
# 解決中文狀態下掃描槍掃描錯誤
# input type=password 取消密碼提示框

使用password密碼框確實能解決不同輸入法的問題，並且Focus到輸入框，輸入法會被強制切換為英文模式

添加autocomplete="off" 或 autocomplete="new-password"屬性

官方文檔： # 如何關閉表單自動填充

但是在Chromium內核的瀏覽器，不支持autocomplete="off"，並且還是會出現這種自動補全提示：

 上面的屬性並沒有解決瀏覽器會出現密碼補全框，並且在輸入字元後，瀏覽器還會在右上角彈窗提示是否保存：

先解決密碼補全框，這裡我想到了一個屬性readonly，input原生屬性。input[type=password]在readonly 時，是不會有密碼補全的提示，並且也不會彈窗提示密碼保存。

那好，我們就可以在輸入前以及輸入完成後，將input[type=password]立即設置成readonly

但是需要考慮下麵幾種情況：

  • 獲取焦點/失去焦點時
  • 當前輸入框已focus時，再次滑鼠點擊輸入框
  • 掃碼槍輸出完成最後，輸入Enter鍵時，如果清空輸入框，這時候也會顯示自動補全
  • 清空輸入框時
  • 切換離開頁面時

這幾種情況都需要處理，將輸入框變成readonly

我用vue+element-ui實現了一份，貼上代碼：

<template>
  <div class="scanner-input">
    <input class="input-password" :name="$attrs.name || 'one-time-code'" type="password" autocomplete="off" aria-autocomplete="inline" :value="$attrs.value" readonly @input="onPasswordInput">
    <!-- <el-input ref="scannerInput" v-bind="$attrs" v-on="$listeners" @input="onInput"> -->
    <el-input ref="scannerInput" :class="{ 'input-text': true, 'input-text-focus': isFocus }" v-bind="$attrs" v-on="$listeners">
      <template v-for="(_, name) in $slots" v-slot:[name]>
        <slot :name="name"></slot>
      </template>
      <!-- <slot slot="suffix" name="suffix"></slot> -->
    </el-input>
  </div>
</template>

<script>
export default {
  name: 'WispathScannerInput',
  data() {
    return {
      isFocus: false
    }
  },
  beforeDestroy() {
    this.$el.firstElementChild.setAttribute('readonly', true)
    this.$el.firstElementChild.removeEventListener('focus', this.onPasswordFocus)
    this.$el.firstElementChild.removeEventListener('blur', this.onPasswordBlur)
    this.$el.firstElementChild.removeEventListener('blur', this.onPasswordClick)
    this.$el.firstElementChild.removeEventListener('mousedown', this.onPasswordMouseDown)
    this.$el.firstElementChild.removeEventListener('keydown', this.oPasswordKeyDown)
  },
  mounted() {
    this.$el.firstElementChild.addEventListener('focus', this.onPasswordFocus)
    this.$el.firstElementChild.addEventListener('blur', this.onPasswordBlur)
    this.$el.firstElementChild.addEventListener('click', this.onPasswordClick)
    this.$el.firstElementChild.addEventListener('mousedown', this.onPasswordMouseDown)
    this.$el.firstElementChild.addEventListener('keydown', this.oPasswordKeyDown)

    const entries = Object.entries(this.$refs.scannerInput)
    // 解決ref問題
    for (const [key, value] of entries) {
      if (typeof value === 'function') {
        this[key] = value
      }
    }
    this['focus'] = this.$el.firstElementChild.focus.bind(this.$el.firstElementChild)
  },
  methods: {
    onPasswordInput(ev) {
      this.$emit('input', ev.target.value)
      if (ev.target.value === '') {
        this.$el.firstElementChild.setAttribute('readonly', true)
        setTimeout(() => {
          this.$el.firstElementChild.removeAttribute('readonly')
        })
      }
    },
    onPasswordFocus(ev) {
      this.isFocus = true
      setTimeout(() => {
        this.$el.firstElementChild.removeAttribute('readonly')
      })
    },
    onPasswordBlur() {
      this.isFocus = false
      this.$el.firstElementChild.setAttribute('readonly', true)
    },
    // 滑鼠點擊輸入框一瞬間，禁用輸入框
    onPasswordMouseDown() {
      this.$el.firstElementChild.setAttribute('readonly', true)
    },
    oPasswordKeyDown(ev) {
      // 判斷enter鍵
      if (ev.key === 'Enter') {
        this.$el.firstElementChild.setAttribute('readonly', true)
        setTimeout(() => {
          this.$el.firstElementChild.removeAttribute('readonly')
        })
      }
    },
    // 點擊之後，延遲200ms後放開readonly，讓輸入框可以輸入
    onPasswordClick() {
      if (this.isFocus) {
        this.$el.firstElementChild.setAttribute('readonly', true)
        setTimeout(() => {
          this.$el.firstElementChild.removeAttribute('readonly')
        }, 200)
      }
    },
    onInput(_value) {
      this.$emit('input', _value)
    },
    getList(value) {
      this.$emit('input', value)
    }
    // onChange(_value) {
    //   this.$emit('change', _value)
    // }
  }
}
</script>

<style lang="scss" scoped>
.scanner-input {
  position: relative;
  height: 36px;
  width: 100%;
  display: inline-block;
  .input-password {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 16px;
    font-size: 14px;
    letter-spacing: 3px;
    background: transparent;
    color: transparent;
    // caret-color: #484848;
  }
  .input-text {
    font-size: 14px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background-color: transparent;
    ::v-deep .el-input__inner {
      // background-color: transparent;
      padding: 0 16px;
      width: 100%;
      height: 100%;
    }
  }

  .input-text-focus {
    ::v-deep .el-input__inner {
      outline: none;
      border-color: #1c7af4;
    }
  }
}
</style>

至此，可以保證input[type=password]不會再有密碼補全提示，並且也不會再切換頁面時，會彈出密碼保存彈窗。 但是有一個缺點，就是無法完美顯示游標。如果用戶手動輸入和刪除，使用起來會有一定的影響。

本文轉載於:

https://juejin.cn/post/7265666505102524475

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【演算法】國慶加班，火鍋與Linq.AddRange的奇妙螺旋
    Css實現瀏覽滾動條效果 前言 也是有大半個月沒有更新文章了，大部分時間都在玩，然後就是入職的事。今天就更新一個小知識，刷抖音的時候看到的，感覺還不錯。 屬性介紹 關鍵屬性animation-timeline:動畫名稱; 用於控制動畫的時間軸。它可以讓你在一個元素上同時播放多個動畫，控制它們的開始時 ...
  • 鏈接器工作原理
    一、簡介 ssh（secure shell，安全外殼協議），該協議有2個常用的作用：遠程連接、遠程文件傳輸。 協議使用埠號：預設是22。 可以是被修改的，如果需要修改，則需要修改ssh服務的配置文件： #/etc/ssh/ssh_config 埠號可以修改，但是得註意2個事項： a. 註意範圍， ...
  • linux內核網路源碼學習（二）
    為什麼要使用skb_reserve函數把邊界對齊 skb_reserve 函數通常用於網路編程中的數據包處理，特別是在構建自定義協議棧或數據包處理模塊時。它的作用是為數據包的頭部預留額外的空間，以確保數據包的頭部數據在記憶體中是對齊的。 邊界對齊的概念是因為許多硬體平臺和網路協議要求數據包頭的位元組對齊 ...
  • 臨時表、視圖與系統函數_Lab2
    前言 每個索引都是一顆B+樹，對於聚簇索引，每一條完整記錄都存儲在B+樹都葉子節點上；對於其他索引，葉子節點存儲了索引列和主鍵。這麼做都是為了提升查詢速度，那麼在實際使用中，是不是應該給所有列都添加索引呢，索引該如何使用呢？ 先見一張表，隨機添加一些數據： CREATE TABLE single_t ...
  • 【Mysql】不要用int類型存儲11位手機號
    一、遇到問題 今天在做添加數據的時候，發現手機號存儲錯誤，報錯信息是： Cause: com.mysql.cj.jdbc.exceptions.MysqlDataTruncation: Data truncation: Out of range value for column 'f_phone' ...
  • 分散式事務：XA和Seata的XA模式
    上一篇內容《從2PC和容錯共識演算法討論zookeeper中的Create請求》介紹了保證分散式事務提交的兩階段提交協議，而XA是針對兩階段提交提出的介面實現標準，本文則對XA進行介紹 ...
  • vue項目使用lodash節流防抖函數問題與解決
    背景 在lodash函數工具庫中，防抖_.debounce和節流_.throttle函數在一些頻繁觸發的事件中比較常用。 防抖函數_.debounce(func, [wait=0], [options=]) 創建一個 debounced（防抖動）函數，該函數會從上一次被調用後，延遲 wait 毫秒後 ...
  • css字體樣式
    1.font-style 設置字體樣式 屬性值： normal：指定⽂本字體樣式為正常的字體 italic：指定⽂本字體樣式為斜體。 2.文字字體 font-family 只能引用系統自帶的字體樣式，如果需要其他別的字體，需要從外部下載調用 引用外部字體 網站：https://font.chinaz ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類