设置操作系统特定的键绑定 - Mac 上的 cmd 并在其他所有内容上按 Ctrl

Question

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

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

Answer 1

不幸的是，

目前没有JavaScript API来检测主机操作系统是否使用Ctrl键或Cmd键作为键盘快捷键。确定这一点的唯一方法是使用平台嗅探。

这通常是通过使用navigator.platform属性来完成的。事实上，你提到的库，Ace编辑器，实际上是这样做的。此属性还具有以下优点：如果更改用户代理字符串（至少正常情况下不会），它不会更改。在 macOS 上，navigator.platform 返回一个字符串，如 MacProcessor 或基于 Intel 的 Mac 上的 MacIntel。

不过，它在技术上已被弃用（但不太可能很快被删除），并且某些浏览器仅在安全上下文中实现了较新的navigator.userAgentData.platform属性（在macOS上采用macOS的形式）。

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

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

现在我们只需要使用这个语句中的布尔返回值，来确定我们的快捷键应该是 e.metaKey ，还是 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>