Chrome开发者工具（F12）抢占焦点求助：扫码枪输入异常

• 用JavaScript强制维持目标元素焦点
  给网页添加一段脚本，监听焦点丢失事件，一旦目标元素失去焦点就立刻重新聚焦；或者定时检查并聚焦。比如：

  // 替换成你的目标元素选择器，比如input#scan-target
  const targetElement = document.querySelector('input#scan-target');
  if (targetElement) {
    // 监听焦点丢失事件
    targetElement.addEventListener('blur', () => {
      setTimeout(() => targetElement.focus(), 10);
    });
    // 初始聚焦
    targetElement.focus();
  }
  

  把这段代码放在网页的脚本里，或者直接在开发者工具的Console里执行一次，就能让目标元素在失去焦点后自动抢回焦点。

• 利用扫码枪的自定义前缀触发聚焦
  大部分扫码枪支持自定义前缀（比如发送一个特殊快捷键组合），在扫码前先发送这个前缀。然后在网页里监听这个快捷键事件，触发时立刻聚焦目标元素：

  document.addEventListener('keydown', (e) => {
    // 假设前缀是Ctrl+Shift+S，可根据扫码枪设置调整
    if (e.ctrlKey && e.shiftKey && e.key === 'S') {
      e.preventDefault();
      document.querySelector('input#scan-target').focus();
    }
  });
  

  这种方式更精准，只有扫码时才触发聚焦，不会影响正常操作。

• 调整Chrome开发者工具的焦点行为
  打开开发者工具的设置（点击右上角三个点 → Settings），进入Preferences标签，取消勾选“Focus DevTools when opening”；如果是实验性功能里有“Disable auto-focus on DevTools when switching panels”，也可以勾选上。不过这个选项主要优化打开时的焦点逻辑，配合脚本使用效果更好。

• 临时锁定焦点到网页
  在开发者工具的Console里执行document.querySelector('input#scan-target').focus()，之后不要点击DevTools的任何输入框（比如Console、Elements面板的搜索框），保持网页区域的焦点。如果不小心点了DevTools，再执行一次这个命令即可。

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