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

Question

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

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

Answer 1

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

这通常是通过使用navigator.platform属性来完成的.事实上,你提到的图书馆,Ace编辑器,实际上是这样做的.此属性还具有以下优点:如果更改用户代理字符串(至少不正常),它将不会更改.

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

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

现在我们只需要使用此语句中的布尔返回值来确定我们的快捷键是否应该是e.metaKey,或者e.ctrlKey.

工作实例:

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';
    }
});

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

警告:

现在,您可能希望考虑一个可能的警告,那navigator.platform就是不推荐使用.

从MDN页面上的通知:

弃用

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

考虑到使用它的库和网站的数量,似乎不太可能很快删除此功能,但如果这涉及到您,您可能需要考虑使用用户代理字符串,或者只是让用户执行要么在任何平台上采取行动

工作示例(允许在所有平台上):

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>