设置 OS 特定的键绑定 - 在 Mac 上使用 Cmd，在其他所有东西上使用 Ctrl

Question

配置 Ace（文本编辑器）时，您可以使用 OS 特定的键绑定，例如 {win: "Ctrl-Esc", mac: "Cmd-Esc"}。这表明您可以在 JavaScript 中拥有 OS 特定的键绑定，但它是如何完成的？

我想创建在 OS X 上使用 Cmd 并在其他系统上使用 Ctrl 的快捷方式。

Answer 1

不幸的是，此时没有 JavaScript API 来检测主机 OS 是否使用 Ctrl 键或 Cmd 键盘快捷键。确定这一点的唯一方法是使用平台嗅探。

这通常是通过使用 navigator.platform property. In fact, the library you mention, Ace editor, actually does it this way 来完成的。这个属性还有一个好处，就是如果你改变用户代理字符串它不会改变（至少通常不会）。在 Mac 上 OS、navigator.platform returns 类似 MacProcessor 的字符串，或在基于 Intel 的 Mac.

上的 MacIntel

它在技术上已被弃用（但不太可能很快被删除），并且一些浏览器仅在安全上下文中实现了更新的 navigator.userAgentData.platform 属性（采用 [=20 的形式=] 在 Mac 上OS).

有了这些知识，我们可以设计一个正则表达式来匹配任何可用的属性。像下面这样的东西应该是安全的和面向未来的。

/mac/i.test(navigator.userAgentData ? navigator.userAgentData.platform : navigator.platform);

现在我们只需要使用这个语句中的布尔值 return 来确定我们的快捷键是否应该是 e.metaKey, or e.ctrlKey.

工作示例：

var isMac = /mac/i.test(navigator.userAgentData ? navigator.userAgentData.platform : navigator.platform);

window.addEventListener('keydown', function(e) {
    if (e.keyCode === 67 && (isMac ? e.metaKey : e.ctrlKey)) {
        document.getElementById('textarea').value += 'Thanks ' + (isMac ? 'Mac' : 'Non-Mac') + '!\n';
    }
});

<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> on Mac, or <kbd>Ctrl</kbd> + <kbd>C</kbd> on everything else.</p>

<textarea id="textarea" style="width: 100%; height: 100px;" placeholder="Click me then use shortcut keys."></textarea>

或者：

您也可以考虑只允许用户在任何平台上使用任一快捷方式。

工作示例：

window.addEventListener('keydown', function(e) {
    if (e.keyCode === 67 && (e.metaKey || e.ctrlKey)) {
        document.getElementById('textarea').value += 'Thanks!\n';
    }
});

<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> or <kbd>Ctrl</kbd> + <kbd>C</kbd>.</p>

<textarea id="textarea" style="width: 100%; height: 100px;" placeholder="Click me then use shortcut keys."></textarea>

设置 OS 特定的键绑定 - 在 Mac 上使用 Cmd，在其他所有东西上使用 Ctrl

Setting OS Specific Keybindings - Cmd on Mac and Ctrl on Everything Else

javascript

macos

keyboard-shortcuts

keyboard-events

工作示例：

或者：

工作示例：