My requirement is just easy: user press Ctrl key some notification appear on my page, and when released the notifications just disappear, so i need to track modifier keys such as Ctrl. Unfortunately i google and didn't find any clues, some famous keyboard libs such as Mousetrap and keymaster seem also does not cover this topic.

Any ideas?

My requirement is just easy: user press Ctrl key some notification appear on my page, and when released the notifications just disappear, so i need to track modifier keys such as Ctrl. Unfortunately i google and didn't find any clues, some famous keyboard libs such as Mousetrap and keymaster seem also does not cover this topic.

Any ideas?

• javascript
• jquery
• keyboard-shortcuts

• I'd just like to point out that Mousetrap does cover modifier usage. I'm not sure if they covered it when this was posted, but it's on their front page now. Do something like: Mousetrap.bind('mand+shift+k', function(e) { /*do things*/ }; – pixelpax Commented Aug 23, 2015 at 18:18

3 Answers 3

Modifier keys trigger keydown (but not keypress). Then you can simply check the flags defined on the event object. shiftKey, altKey, ctrlKey, metaKey, etc.

A full list is here: http://api.jquery./category/events/event-object/

With jQuery, you can just use the keydown and keyup event handlers and you will see the Ctrl key go down and up. If you want to keep track of whether it's down or up, then just set a global flag when it goes down and clear the flag when it goes up.

Example code:

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

JQuery doc on e.which: http://api.jquery./event.which/

Working demo: http://jsfiddle/jfriend00/mezwF/

Try this-

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();