在 Safari 中检测命令 + 击键 [英] Detecting command + keystroke in Safari

问题描述

我正在尝试拦截 Safari 中的命令 + 击键.我添加了一个事件处理程序，如下所示:

I'm trying to intercept the command + keystroke in Safari. I've added an event handler as follows:

document.onkeypress = handleKeyPress;

function handleKeyPress(event) {
    if ("+" === String.fromCharCode(event.charCode) && event.metaKey) {
        // my code here
        return false;
    }
    return true;
}

当我点击 command shift = (shift = 是 + 在我的美国键盘上)，if 语句不会返回 true.

When I hit command shift = (shift = is + on my US keyboard), the if statement does not return true.

如果我删除 if 语句的 event.metaKey 部分并点击 shift =，if 语句确实返回 true.

If I remove the event.metaKey portion of the if statement and hit shift =, the if statement does return true.

此外，如果我将匹配字符串从 "+" 更改为 "=" 并点击 command =(有或没有 shift 键)，if 语句会返回真.

Also, if I change the matching string from "+" to "=" and hit command = (with or without the shift key), the if statement does return true.

有没有办法实际检测命令 + 按键(不假设 + 键是 shift = 并检查 event.shiftKey，因为这对于某些非美式键盘来说不是真的)?

Is there a way to actually detect the command + keypress (without assuming that the + key is shift = and checking for the event.shiftKey, since this will not be true for some non-US keyboards)?

推荐答案

首先，我不一定推荐使用 ⌘+ 作为快捷方式，因为它在 Safari 中已经意味着某些东西(即缩放页面).有人可能希望它仍然正常工作.根据您正在构建的内容，这可能有意义，但除非您确定，否则不要覆盖默认快捷方式.

First of all, I can't necessarily recommend using ⌘+ as a shortcut, since it already means something in Safari (namely, zoom the page). Someone might want that to still work normally. Depending on what you're building, it might make sense, but don't override the default shortcuts unless you're sure.

无论如何:关键事件很棘手，通常是因为 keyCode/charCode/which 属性不t 总是与正确的字母匹配，因此 String.fromCharCode 不会总是为您提供正确的字符串.keyIdentifier 有时更好看，但并非总是如此(例如，它的字母键代码总是大写字母).

Anyway: Key events are tricky, often because the keyCode/charCode/which properties don't always match up with the right letter, so String.fromCharCode won't always get you a proper string. keyIdentifier is sometimes a better thing to look at, but not always (for instance, its codes for letter keys are always uppercase letters).

我过去所做的(我不确定这是最好的方法，但它工作正常)，而是监听 keydown 和 keyup 事件，以及堆栈"修饰键.IE.每当按下某个键时，请检查它是否是修饰键(即是否是 cmd、ctrl、alt 或 shift).如果是，请将其添加到修饰符的堆栈"中.在 keyup 上做相反的事情；如果释放的键是修饰符，则将其从堆栈中移除.

What I've done in the past (and I'm not sure that this is the best way to do it, but it works ok), is to instead listen for keydown and keyup events, and "stack" modifier keys. I.e. whenever a key is depressed, check whether it's a modifier key (i.e. if it's cmd, ctrl, alt, or shift). If it is, add it to the "stack" of modifiers. Do the opposite on keyup; if the released key was a modifier, remove it from the stack.

现在，回到 keydown 处理程序，如果键不是修饰键，您可以发送 keydown 事件(与 keypress 事件不同，它具有非常可靠的 keyIdentifier 属性检查)，以及修饰符堆栈以及其他一些回调，将从那里获取它.

Now, back in the keydown-handler, if the key wasn't a modifier key, you can send the keydown event (which, unlike a keypress event, will have a pretty reliable keyIdentifier property to check), and the stack of modifiers along to some other callback, that'll take it from there.

在您的情况下，这样的回调将检查 cmd-key 是否在堆栈中，并且 keydown 事件的 keyIdentifier 是U+002B"(这是 +).

In your case, such a callback would check that the cmd-key is in the stack, and that the keyIdentifier for the keydown event is "U+002B" (which is the unicode code for +).

我已经整理了一个 jsfiddle 示例来说明我在说什么.如果您单击结果"窗格(以确保它获得焦点)，然后按 ⌘+，它应该会显示您使用的组合键，并写上成功！"以下.否则，它只会显示组合键.在我的键盘上，可以直接访问加号，所以我看到的组合键只是⌘+".但是如果你需要 shift 来输入加号，你应该看到⇧⌘+".

I've put together a jsfiddle example of what I'm talking about. If you click in the "Result" pane (to make sure it's got focus), and press ⌘+, it should show the key combo you used, and write "Success!" below. Otherwise, it'll just show the key combo. On my keyboard, the plus sign is directly accessible, so the key combo I see is just "⌘+". But if you need shift to type a plus sign, you should see "⇧⌘+".

这是一段通用代码，适用于处理 Safari/Mac 中的键盘快捷键，因此您可以根据需要在其上进行构建.您需要添加一些事件侦听器来重置模糊事件等的修改器堆栈.理想情况下，修改器堆栈会在您释放键时自动重置，但由于某些原因可能会导致浏览器或观察到的元素/窗口/文档失去焦点，因此不会处理 keyup 事件，释放的键将获胜' 不会从堆栈中删除.因此，请检查模糊事件.

It's a generalized piece of code that's good for handling keyboard shortcuts in Safari/Mac, so you can build on it, if you want. You'll want to add a few event listeners to reset the modifier stack on blur events and such. Ideally, the modifier stack would reset automatically, as you release the keys, but since something might cause the browser, or the observed element/window/document, to lose focus, the keyup events won't be handled, and the released keys won't be removed from the stack. So check for blur events.

这篇关于在 Safari 中检测命令 + 击键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！