如何实现表单唯一输入框始终保持光标聚焦

有两层可落地的技术方案，叠加使用可以完全覆盖所有扫码场景，不会出现输入丢失的问题：

1. 基础自动重聚焦方案（覆盖绝大多数常规场景） #

核心逻辑是监听输入框失焦事件，在失焦后短延迟重新触发聚焦，避开浏览器对同步焦点抢占的拦截：

• 页面初始化完成后立刻给扫码输入框聚焦
• 绑定blur事件，失焦后延迟20ms左右重新调用focus()方法，同时把光标定位到输入内容末尾，不影响连续扫码
• 给滚动区域添加user-select: none样式，减少拖动滚动条时触发的不必要失焦
  参考实现代码：

const scanInput = document.querySelector('#scan-input');
let lastInputTime = 0;

// 初始化聚焦
window.addEventListener('DOMContentLoaded', () => scanInput.focus());

// 失焦自动抢回
scanInput.addEventListener('blur', () => {
  setTimeout(() => {
    scanInput.focus();
    scanInput.setSelectionRange(scanInput.value.length, scanInput.value.length);
  }, 20);
});

注意：不要通过阻止全局mousedown默认事件的方式强制留焦，会导致按钮点击、文本选择、滚动条拖动等所有原生交互失效，严重影响可用性。

2. 全局输入兜底方案（覆盖极端漏输场景） #

扫码枪的本质是模拟键盘快速输入，遇到页面卡顿、临时弹窗等极端情况，重聚焦逻辑可能存在几十毫秒的空窗期，可通过全局键盘监听做兜底：

• 监听全局keydown事件，识别扫码枪的高速输入特征（字符输入间隔通常小于10ms，结束符固定为回车）
• 当检测到当前焦点不在扫码输入框，且输入符合扫码特征时，直接把输入内容拼接到输入框值中，扫码结束后触发对应的业务处理逻辑，同时切回焦点
  参考实现代码：

let scanBuffer = '';
document.addEventListener('keydown', (e) => {
  // 跳过组合快捷键场景，避免误捕获
  if (e.ctrlKey || e.altKey || e.metaKey) return;

  // 焦点在输入框时走原生逻辑，不额外处理
  if (document.activeElement === scanInput) {
    if (e.key === 'Enter') {
      handleScanSubmit(scanInput.value);
      scanInput.value = '';
    }
    return;
  }

  // 焦点不在输入框时做兜底捕获
  const now = Date.now();
  if (now - lastInputTime > 100) scanBuffer = '';
  lastInputTime = now;

  if (e.key === 'Enter') {
    handleScanSubmit(scanBuffer);
    scanBuffer = '';
    scanInput.focus();
    return;
  }

  if (e.key.length === 1) {
    scanBuffer += e.key;
    scanInput.value += e.key;
  }
});

// 扫码结果处理逻辑
function handleScanSubmit(code) {
  // 原有业务逻辑：新增记录、刷新列表等
}

特殊场景处理 #

如果页面存在其他需要临时输入的组件（比如查询框、弹窗表单），可以加一个全局开关标记，当其他输入组件激活时，临时关闭自动重聚焦和全局兜底逻辑，组件关闭后再重新开启，避免交互冲突。

内容的提问来源于stack exchange，提问作者KBL