Electron v5-v7版本webview无法接收按键输入问题求助

我之前帮几个开发者排查过类似的Electron版本升级后webview输入焦点异常的问题，结合你的描述，大概率是新版本Electron的webview焦点管理机制变化导致的——尤其是从v5+开始，Chromium内核更新带来了焦点事件处理的差异，旧版本v3/v4的兼容逻辑被移除了。

给你几个经过验证的解决方案，按优先级尝试：

• 显式配置webview的WebPreferences
  在webview标签或主进程的BrowserWindow配置中，调整上下文隔离和节点集成的设置，部分场景下关闭上下文隔离可以修复焦点传递问题：

  <!-- 渲染进程中的webview标签 -->
  <webview src="your-page-url" webpreferences="contextIsolation=false, nodeIntegration=false"></webview>
  

  或者在主进程创建窗口时配置：

  // 主进程代码
  const { BrowserWindow } = require('electron');
  const mainWindow = new BrowserWindow({
    webPreferences: {
      webviewTag: true,
      contextIsolation: false,
      nativeWindowOpen: true
    }
  });
  

• 禁用Chromium的自动聚焦策略
  在主进程的app.whenReady()回调中添加命令行开关，禁用自动聚焦特性，避免和webview的焦点逻辑冲突：

  // 主进程代码
  const { app } = require('electron');
  app.whenReady().then(() => {
    app.commandLine.appendSwitch('disable-features', 'AutoFocusOnPageLoad');
    // 后续创建窗口逻辑
  });
  

• 手动干预webview内的焦点事件
  如果上面的方案无效，可以在webview加载完成后，注入脚本强制处理文本框的焦点：

  // 渲染进程代码
  const webview = document.querySelector('webview');
  webview.addEventListener('dom-ready', () => {
    webview.executeJavaScript(`
      // 在webview内部监听焦点变化，确保文本框获得焦点时能捕获键盘输入
      document.addEventListener('focus', (e) => {
        const target = e.target;
        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
          // 强制触发两次焦点，确保Chromium内核识别
          target.focus();
          setTimeout(() => target.focus(), 50);
        }
      }, true);
    `);
  });
  

• 排查全局键盘事件拦截
  检查你的主进程或渲染进程中是否有全局监听keydown/keyup事件并调用preventDefault()的代码，这类逻辑可能会意外拦截webview内的输入事件，确保不对webview区域的键盘事件进行拦截。

另外，你提到多次按TAB后恢复正常，这是因为TAB键触发了系统级的焦点遍历，强制重新建立了webview和文本框之间的焦点关联，也侧面验证了焦点传递是核心问题。

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