Android React Web应用中实现无软键盘的条码扫描输入方案求助

我现在在开发一款用于订单拣选的React Web应用，核心需求是：用户点击订单行后能立即扫描条码（包括纯数字追溯码如2024000240、GS1条码、EAN码），全程不能弹出软键盘，也不需要可见的输入框——软键盘弹出的体验实在太糟糕了，完全没必要让用户看到。但目前我遇到了不少棘手的问题，想请教大家有没有靠谱的解决方案。

现状与当前方案的痛点 #

我目前用了一个临时方案：页面上放一个输入框，点击订单行时，短暂将inputmode设为numeric触发软键盘，25毫秒后切回none，同时让输入框获取焦点，这样扫描枪能把条码内容粘贴到输入框里。但这个方案问题很多：

• 软键盘弹出又快速收起，视觉干扰极强，用户体验很差
• 偶尔会出现扫描内容无法粘贴到输入框的情况（大概每20次操作就会遇到1次）
• 多次点击订单行、反复触发键盘后，扫描内容才会正确输入到框中

我尝试过的其他方案（均未成功） #

• 不用剪贴板的扫描模式：直接让扫描枪输出内容而非复制到剪贴板，但这种方式下条码内容无法稳定传递到应用中
• 隐藏输入框+不触发键盘：把输入框设为不可见且不触发键盘，但高版本Android（11+）对剪贴板粘贴的限制更严格，扫描内容根本无法传递到隐藏的输入框里

我的扫描枪（ScanWedge）当前设置 #

• 触发模式：触发释放或超时
• 输出模式：Intent输出
• 剪贴板：开启
• 编辑器文本模式：追加

相关代码片段 #

下面是我当前实现的核心代码：

状态与逻辑部分 #

const [barcodeInput, setBarcodeInput] = useState("");
const [selected, setSelected] = useState(null);
const [needsKeyboard, setNeedsKeyboard] = useState(null);
const barcodeInputRef = useRef(null);

// 点击订单行后触发输入框准备逻辑
useEffect(() => {
  if (isNotNull(selected)) {
    showKeyboard();
  }
}, [selected]);

// 处理扫描到的条码内容
useEffect(() => {
  if (isNotNull(selected) && !isOpen) {
    if (positionRegex?.test(barcodeInput)) {
      scanPosition(rule);
    } else if (barcodeInput.length >= 12 && barcodeInput.length <= 14 && isValidEAN(barcodeInput)) {
      scanEan(rule);
    } else if (barcodeInput.length >= 8 && barcodeInput.length <= 16) {
      scanTracecode(rule);
    } else if (barcodeInput.length > 16) {
      scanGs1(rule);
    }
  }
}, [barcodeInput]);

// 短暂触发键盘的函数，用于让Android允许粘贴扫描内容
async function showKeyboard() {
  function timer(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
  setNeedsKeyboard(true);
  await timer(25);
  setNeedsKeyboard(false);
  barcodeInputRef?.current?.focus({ preventScroll: true });
}

输入框JSX部分 #

<TextInput
  readOnly={selected === null}
  style={{ whiteSpace: "nowrap", width: '100%', padding: 7.5 }}
  onChange={(e) => setBarcodeInput(e.target.value)}
  ref={barcodeInputRef}
  radius="sm"
  inputMode={needsKeyboard ? "numeric" : "none"}
  value={barcodeInput}
  size="md"
  classNames={{ input: 'input' }}
  placeholder={t('Scan iets...')}
/>

我现在最理想的状态是：用户点击订单行后，直接扫描就能获取条码内容，不需要任何可见输入框，更不能有软键盘弹出。希望有过类似场景开发经验的朋友能给我一些建议，或者有没有办法直接监听扫描枪的Intent输出，绕过输入框和剪贴板的限制？万分感谢！

内容来源于stack exchange