Electron自定义浏览器屏幕键盘无法向webview输入内容问题咨询

方案1：修复现有react-simple-keyboard方案（优先推荐，无额外依赖） #

核心是解决点击键盘触发输入框失焦的问题，无需全局模拟输入：

• 给react-simple-keyboard组件绑定onMouseDown事件，回调内执行e.preventDefault()，阻止mousedown默认行为后，点击键盘不会触发已聚焦输入框的blur事件，输入框可保持聚焦状态。
• 按键值输入分场景处理：
  • 应用层普通输入框：直接通过React状态绑定更新值即可
  • webview内部输入框：调用webview实例的executeJavaScript方法注入输入逻辑，兼容普通input、textarea、可编辑div元素，自动适配光标位置，同时触发原生input事件保证页面框架能识别值变更，核心代码：

// 渲染进程内，webviewRef为webview标签的引用
webviewRef.current.executeJavaScript(`
  (function insertChar(char) {
    const activeEl = document.activeElement;
    if (!activeEl) return;
    const isEditable = ['INPUT', 'TEXTAREA'].includes(activeEl.tagName) || activeEl.isContentEditable;
    if (!isEditable) return;
    const start = activeEl.selectionStart || 0;
    const end = activeEl.selectionEnd || 0;
    const originValue = activeEl.tagName === 'INPUT' || activeEl.tagName === 'TEXTAREA' ? activeEl.value : activeEl.textContent;
    const newValue = originValue.slice(0, start) + char + originValue.slice(end);
    if (activeEl.tagName === 'INPUT' || activeEl.tagName === 'TEXTAREA') {
      activeEl.value = newValue;
    } else {
      activeEl.textContent = newValue;
    }
    activeEl.selectionStart = activeEl.selectionEnd = start + char.length;
    activeEl.dispatchEvent(new Event('input', { bubbles: true }));
  })('${args.value}')
`)

• 若webview开启了上下文隔离，需在preload脚本内暴露上述插入字符的方法，不要直接关闭webview的安全配置。

方案2：唤起Windows原生OSK屏幕键盘 #

直接调用系统原生屏幕键盘，全场景兼容无需适配输入逻辑：

• 主进程通过Node.js内置child_process模块唤起系统OSK程序，通过IPC和渲染进程通信，核心代码：

// 主进程代码
const { exec } = require('child_process');
const { ipcMain } = require('electron');
let oskInstance = null;

ipcMain.handle('open-osk', () => {
  if (oskInstance) return;
  // 64位/32位系统下OSK默认路径一致，直接执行即可唤起
  oskInstance = exec('C:\\Windows\\System32\\osk.exe');
  oskInstance.on('close', () => {
    oskInstance = null;
  })
})

ipcMain.handle('close-osk', () => {
  if (!oskInstance) return;
  oskInstance.kill();
  oskInstance = null;
})

• 渲染进程内监听输入框聚焦事件：应用层普通输入框直接绑定focus/blur事件，webview可通过addEventListener('focus-in-event')结合注入脚本判断当前聚焦元素是否为可输入元素，聚焦输入框时发IPC消息唤起OSK，失焦时关闭即可。
• 注意：打包后应用不要默认申请管理员权限，否则高权限的OSK无法和普通权限运行的应用窗口正常交互。

方案3：替换nut-tree为Electron原生输入事件模拟 #

nut-tree全局输入无法识别webview内焦点，改用Electron内置的sendInputEventAPI，可精准向任意webContents（含webview内部）发送输入事件：

• 拿到对应窗口/webview的webContents实例后，直接发送键盘事件序列即可，无需第三方依赖，核心代码：

/**
 * 向指定webContents发送字符输入
 * @param {Electron.WebContents} webContents 目标webContents实例
 * @param {string} char 要输入的字符
 */
function inputChar(webContents, char) {
  const key = char.length === 1 ? char : char;
  webContents.sendInputEvent({ type: 'keyDown', keyCode: key });
  webContents.sendInputEvent({ type: 'char', keyCode: char });
  webContents.sendInputEvent({ type: 'keyUp', keyCode: key });
}

• 输入上层普通输入框时，传入主窗口的webContents；输入webview内输入框时，传入webview实例的getWebContents()返回值即可。特殊按键（退格、回车、方向键等）只需对应修改keyCode参数，规则和DOM键盘事件一致。
• 该方案为Electron原生实现，不存在全局模拟的焦点识别问题，只要目标输入框处于聚焦状态即可正常输入。

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