如何为按键输入设置默认输入框？React页面条码扫描外接键盘场景实现问询

当然有非常简便的实现方案！核心逻辑其实很简单——条码扫描器本质就是模拟普通键盘输入，所以我们只需要在没有输入框聚焦时，自动把焦点切到Code输入框就行，这样扫描的内容自然会录入进去。

核心思路 #

监听全局的键盘按下事件，每次按键触发前判断：

• 如果当前已经有输入框处于聚焦状态，啥也不用做，输入会正常进入聚焦的框
• 如果没有任何输入框聚焦，立刻把焦点切换到Code输入框，后续的按键（扫描器输入）就会自动进入这个框

React 实现代码示例 #

import { useEffect, useRef } from 'react';

function ScanForm() {
  // 给Code输入框创建一个ref，方便后续调用focus方法
  const codeInputRef = useRef(null);

  useEffect(() => {
    const handleGlobalKeyDown = (e) => {
      // 获取当前页面的聚焦元素
      const activeElement = document.activeElement;
      
      // 判断当前聚焦的是不是我们需要的文本输入框
      const isTargetInputFocused = 
        activeElement?.tagName === 'INPUT' && 
        activeElement.type === 'text';

      // 排除Tab、Esc这类非输入类按键，避免干扰正常操作
      const excludedKeys = ['Tab', 'Escape', 'Control', 'Alt', 'Shift', 'Meta'];
      const isInputKey = !excludedKeys.includes(e.key);

      // 如果没有输入框聚焦，且是输入类按键，就聚焦Code框
      if (!isTargetInputFocused && isInputKey) {
        codeInputRef.current?.focus();
      }
    };

    // 绑定全局键盘事件
    document.addEventListener('keydown', handleGlobalKeyDown);

    // 组件卸载时移除事件监听，防止内存泄漏
    return () => {
      document.removeEventListener('keydown', handleGlobalKeyDown);
    };
  }, []);

  return (
    <div style={{ gap: '8px', display: 'flex', flexDirection: 'column', padding: '16px' }}>
      <input type="text" placeholder="Name" />
      <input type="text" placeholder="Surname" />
      <input ref={codeInputRef} type="text" placeholder="Code" />
    </div>
  );
}

export default ScanForm;

关键细节说明 #

1. 为什么用keydown事件？
   它能捕获所有类型的按键（包括扫描器的快速输入），而且keypress已经被浏览器废弃，keydown是更可靠的选择。

2. 排除特殊按键的原因
   比如按Tab键切换焦点、按Esc键取消操作时，我们不希望强制切到Code输入框，这样能保留正常的用户操作逻辑。

3. 无需处理扫描器特殊事件
   条码扫描器的输入和普通键盘完全一致，只要焦点在Code输入框上，扫描的内容会自动逐字符录入，不需要额外对接扫描器的API。

原生JS实现思路（如果不用React） #

逻辑完全一致，只是把事件绑定放在页面加载完成后：

document.addEventListener('DOMContentLoaded', () => {
  const codeInput = document.querySelector('input[placeholder="Code"]');
  
  const handleGlobalKeyDown = (e) => {
    const activeElement = document.activeElement;
    const isTargetInputFocused = activeElement?.tagName === 'INPUT' && activeElement.type === 'text';
    const excludedKeys = ['Tab', 'Escape', 'Control', 'Alt', 'Shift', 'Meta'];
    const isInputKey = !excludedKeys.includes(e.key);

    if (!isTargetInputFocused && isInputKey) {
      codeInput.focus();
    }
  };

  document.addEventListener('keydown', handleGlobalKeyDown);
});

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