How to track modifier keys using javascriptjquery? - Stack Overflow

admin管理员组

文章数量:1344413

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

Share Follow asked Mar 23, 2013 at 4:17 MikeMike 3,5751111 gold badges4747 silver badges7070 bronze badges 1

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

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

本文标签： How to track modifier keys using javascriptjqueryStack Overflow