如何让Mac的Cmd键（metaKey）模拟Windows的Ctrl键实现跨平台快捷键？

核心思路 #

通过系统检测，在Mac环境下将metaKey（Cmd键）的状态映射到ctrlKey上，让后续的快捷键判断逻辑无需区分平台，统一使用ctrlKey即可实现双平台快捷键一致。

前端浏览器环境实现 #

// 已实现的系统检测函数（确保准确识别Mac平台）
function isMac() {
  return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
}

document.addEventListener('keydown', (e) => {
  // Mac平台下映射Cmd键为Ctrl键逻辑
  if (isMac()) {
    e.ctrlKey = e.metaKey;
    e.metaKey = false; // 可选：避免后续逻辑误判metaKey状态
  }

  // 统一快捷键判断（双平台通用）
  if (e.ctrlKey && e.key.toLowerCase() === 'o') {
    e.preventDefault(); // 阻止浏览器默认打开行为
    // 执行打开新窗口的业务逻辑
    openNewWindow();
  }
});

// 示例业务函数
function openNewWindow() {
  console.log('打开新窗口');
  // 这里添加实际打开窗口的代码
}

Electron桌面应用实现 #

方案1：使用globalShortcut注册平台专属快捷键 #

const { app, globalShortcut, BrowserWindow } = require('electron');
const isMac = process.platform === 'darwin';

app.whenReady().then(() => {
  // 根据平台注册对应快捷键
  const accelerator = isMac ? 'Cmd+O' : 'Ctrl+O';
  globalShortcut.register(accelerator, () => {
    // 打开新窗口逻辑
    const newWindow = new BrowserWindow({ width: 800, height: 600 });
    newWindow.loadFile('index.html');
  });
});

// 应用退出时注销快捷键
app.on('will-quit', () => {
  globalShortcut.unregisterAll();
});

方案2：渲染进程内映射键位（和前端逻辑一致） #

在Electron的渲染进程HTML文件中，直接使用前端环境的键位映射代码即可。

第三方快捷键库适配（以Mousetrap为例） #

如果项目使用了Mousetrap这类快捷键管理库，可直接根据平台注册对应组合键：

import Mousetrap from 'mousetrap';

const isMac = navigator.platform.toUpperCase().includes('MAC');
// 双平台统一逻辑，自动适配Cmd/Ctrl
Mousetrap.bind(isMac ? 'command+o' : 'ctrl+o', () => {
  e.preventDefault();
  openNewWindow();
});

注意事项 #

• 系统检测函数需准确：前端用navigator.platform，Node/Electron用process.platform === 'darwin'
• 处理键盘事件时务必调用e.preventDefault()，避免触发浏览器或系统的默认行为
• 若存在多个快捷键，可将键位映射逻辑封装为工具函数，避免重复代码

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