如何强制Electron显示无修饰键的accelerator快捷键？

1. 触发逻辑实现 #

优先用窗口级的before-input-event事件监听，比渲染层的键盘事件优先级更高，不会被页面内的输入框、快捷键库拦截，适合窗口内生效的场景，代码示例：

const { BrowserWindow, app } = require('electron')

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    // 你的窗口配置项
    width: 800,
    height: 600
  })

  // 监听窗口输入事件
  mainWindow.webContents.on('before-input-event', (event, input) => {
    // 匹配F11按键，排除重复触发的情况
    if (input.key.toLowerCase() === 'f11' && !input.isAutoRepeat) {
      event.preventDefault()
      // 切换窗口最大化状态
      mainWindow.isMaximized() ? mainWindow.unmaximize() : mainWindow.maximize()
    }
  })
})

如果需要全局生效（窗口未激活时也能触发），可以用globalShortcut，记得退出时注销：

const { globalShortcut, app, BrowserWindow } = require('electron')

app.whenReady().then(() => {
  // 注册全局F11快捷键
  globalShortcut.register('F11', () => {
    const activeWindow = BrowserWindow.getFocusedWindow()
    if (activeWindow) {
      activeWindow.isMaximized() ? activeWindow.unmaximize() : activeWindow.maximize()
    }
  })
})

// 应用退出前注销所有全局快捷键
app.on('will-quit', () => {
  globalShortcut.unregisterAll()
})

2. 快捷键展示适配 #

因为Electron原生的accelerator配置不支持无修饰键的功能键，我们可以直接在菜单项的label中自定义展示快捷键文本即可，示例：

const { Menu, BrowserWindow } = require('electron')

const menuTemplate = [
  {
    label: '视图',
    submenu: [
      {
        // 直接在label中添加快捷键文本，按需调整空格对齐
        label: '切换最大化    F11',
        click: () => {
          const activeWindow = BrowserWindow.getFocusedWindow()
          if (activeWindow) {
            activeWindow.isMaximized() ? activeWindow.unmaximize() : activeWindow.maximize()
          }
        }
      }
    ]
  }
]

const appMenu = Menu.buildFromTemplate(menuTemplate)
Menu.setApplicationMenu(appMenu)

注意事项 #

• 如果需要同时支持多窗口，给每个新创建的窗口都绑定before-input-event监听即可
• 可以自行扩展匹配逻辑，通过input.control、input.shift、input.meta等属性判断修饰键状态，实现任意自定义快捷键组合
• 全局快捷键会抢占系统其他应用的同快捷键触发，非必要场景优先用窗口级的before-input-event方案

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