解决输入框扫码时内容被截断的问题

问题背景：安卓设备上的h5项目的表单里，多个表单项通过扫码枪录入，一个输入框录入完成后会自动聚焦到下一个输入框，方便客户使用。由于客户提供的扫描二维码里存在换行，导致一个输入框的内容尚未录入结束就自动聚焦到下一个输入框，且剩余未录入的内容出现在下一个输入框里。

 问题代码：

// template...
<a-input
          ref="value1Ref"
          v-model="value1"
          placeholder="请扫描"
          allowClear
          @keydown.enter="handleEnter"
/>
<a-input
          ref="value2Ref"
          v-model="value2"
          placeholder="请扫描"
          allowClear
          @keydown.enter="handleEnter"
/>

// methods...
handleEnter() {
  if (this.value1 && this.value2) {
     // 两个输入框都有值就提交表单
     this.submit();
  } else if (this.value1&& !this.value2) {
    // 第一个有值，第二个无值，就聚焦第二个输入框
    this.$refs.value2Ref.focus();
  }
}

 问题分析：

此代码监听了输入框回车事件，扫码枪一般录入完成后会自动回车，由回车键来判断是否提交表单。忽略了扫码枪录入的数据中可能自带回车符，从而误触表单提交。

解决方案：

由于此问题无法在pc端的浏览器复现，只能在设备上调试。经调试发现触发扫码内容截断是由于扫码内容里包含向下箭头，需要禁止此按键的默认行为。安全起见，在键盘按下事件（keydown）里禁用一切可能导致输入框失焦的按键。表单提交或聚焦下一个输入框的行为，在输入框内容变化1s后触发。（这边的表单内容都是扫码枪录入的，速度很快，1s的等待足够录入完成）

// template
<a-input
          ref="value1Ref"
          v-model="value1"
          placeholder="请扫描"
          allowClear
          @input="inputHandler"
          @keydown="handleKeyDown"
/>
<a-input
          ref="value2Ref"
          v-model="value2"
          placeholder="请扫描"
          allowClear
          @input="inputHandler"
          @keydown="handleKeyDown"
/>

// ...
import { debounce } from 'lodash';

//...
computed: {
    inputHandler () {
      return debounce(this.handleEnter, 1000);
    },
},
// ...
methods: {
    // 阻止部分键盘默认行为
    handleKeyDown(e) {
      // 32 空格键；9 tab键；13 回车键；40 向下箭头；
      const disabledKeyCodes = [32, 9, 13, 40];
      if(disabledKeyCodes.includes(e.keyCode)) {
        e.preventDefault(); // 阻止默认行为
        e.target.focus();// 保持当前输入框焦点
      }
    },
    // 输入1s后自动触发
    handleEnter() {
      if (this.value1 && this.value2) {
        this.submit();
      } else if (this.value1 && !this.value2) {
        this.$refs.value2Ref.focus();
      }
    },
}

附：input事件和keydown事件的区别

1. input 事件

• 触发时机：

  • 每当输入框的内容发生变化时触发，无论是通过键盘输入、粘贴、拖拽还是其他方式。

  • 包括以下操作：

    • 键盘输入（包括按下字符键、功能键等）。

    • 使用鼠标粘贴内容。

    • 使用拖拽操作将文本拖入输入框。

    • 通过脚本动态修改输入框的值。

• 用途：

  • 适合需要实时响应输入框内容变化的场景，例如：

    • 实时验证输入内容（如格式校验、长度限制等）。

    • 实现自动补全功能。

    • 动态更新界面（如根据输入内容显示提示信息）。

2. keydown 事件

• 触发时机：

  • 该事件在按键被按下时立即触发，但不会触发以下情况：

    • 粘贴操作（粘贴时触发的是 paste 事件）。

    • 拖拽操作。

    • 使用脚本动态修改输入框的值。

  • 每当用户按下键盘上的任意键时触发，包括字母键、数字键、功能键（如 Shift、Ctrl、Alt 等）。

  • 用途：

    • 适合需要在按键按下时进行处理的场景，例如：

      • 捕获特定的快捷键（如 Ctrl+C、Ctrl+V 等）。

      • 阻止某些按键的默认行为（如阻止用户输入某些字符）。

      • 实现键盘导航功能（如通过方向键在列表中移动焦点）。