如何使用 javascript/jquery 跟踪修饰键？答案

【问题标题】：How to track modifier keys using javascript/jquery?如何使用 javascript/jquery 跟踪修饰键？
【发布时间】：2013-03-13 01:45:46
【问题描述】：

我的要求很简单：用户按下 Ctrl 键，一些通知会出现在我的页面上，当释放通知时，通知就会消失，所以我需要跟踪修饰键，例如 Ctrl。不幸的是，我谷歌并没有找到任何线索，一些著名的键盘库，如Mousetrap 和keymaster 似乎也没有涵盖这个主题。

有什么想法吗？

【问题讨论】：

我只想指出 Mousetrap 确实涵盖了修饰符的使用。我不确定他们是否在发布此内容时涵盖了它，但它现在在他们的首页上。执行类似的操作： Mousetrap.bind('command+shift+k', function(e) { /*do things*/ };

标签： javascript jquery keyboard-shortcuts

【解决方案1】：

修饰键触发keydown（但不是keypress）。然后您可以简单地检查事件对象上定义的标志。 shiftKey、altKey、ctrlKey、metaKey等

完整列表在这里：http://api.jquery.com/category/events/event-object/

【讨论】：

【解决方案2】：

试试这个-

var ctrlKey = false;
window.onkeydown = function(e) {
    if(e.keyCode == 17) {
        ctrlKey = true;
    }
};
window.onkeyup = function(e) {
    if(e.keyCode == 17) {
        ctrlKey = false;
    }
};
function notify() {
    if(ctrlKey) {
        $('#notification').show();
    } else {
        $('#notification').hide();
    }
}
function main() {
    var _inter = setInterval(notify, 100);
}

main();

【讨论】：

为什么要使用计时器？为什么不只是在按键向下/向上时隐藏/向下通知。您有一个更改状态的事件。你不需要轮询状态。

【解决方案3】：

使用 jQuery，您可以只使用 keydown 和 keyup 事件处理程序，您会看到 Ctrl 键上下移动。如果你想跟踪它是向下还是向上，那么只需在它下降时设置一个全局标志，并在它上升时清除该标志。

示例代码：

$(document).keydown(function(e) {
    if (e.which == 17) {
        $("#result").append("ctrl key pressed<br>");
    }
});

关于 e.which 的 JQuery 文档：http://api.jquery.com/event.which/

工作演示：http://jsfiddle.net/jfriend00/mezwF/

【讨论】：