设置特定于操作系统的键绑定 - 在Mac上使用Cmd，在其他任何位置设置Ctrl

Question

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

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

Answer 1

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

这通常是通过使用navigator.platform属性来完成的。事实上，你提到的图书馆，Ace编辑，actually does it this way。此属性还具有以下优点：如果更改用户代理字符串（至少不正常），它将不会更改。

在OS X上，navigator.platform在基于Intel的Mac上返回类似MacProcessor或MacIntel的字符串。有了这些知识，我们就可以制作一个匹配的正则表达式。以下内容应该是安全且面向未来的。

/mac/i.test(navigator.platform);

现在我们只需要使用此语句的布尔返回值来确定我们的快捷键是{@ 3}}还是e.metaKey。

工作示例：

＆＃13;

＆＃13;

var isMac = /mac/i.test(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';
    }
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

警告：

现在，您可能希望考虑一个可能的警告，那就是navigator.platform已被弃用。

来自e.ctrlKey上的通知：

  

<强>已过时

     

此功能已从Web标准中删除。虽然有些浏览器可能仍然支持它，但它正在被删除。不要在旧项目或新项目中使用它。使用它的页面或Web应用程序可能随时中断。

考虑到使用它的图书馆和网站的数量，似乎不太可能很快删除此功能，但如果这涉及到您，您可能需要考虑使用用户代理字符串，或者只是让它用户在任何平台上执行任一操作。

工作示例（允许在所有平台上使用）：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;