Performing key combos with jQuery / JavaScript

Question

I am curious how I, with the following jQuery im code, writing at the bottom of this question, could implement key combos. How it works so far, it allows the user to create key commands by simply following the usual jQuery syntax and providing an event for the key command, for example:

$(window).jkey('a',function(){ alert('you pressed the a key!'); }); 

or

 $(window).jkey('bc d',function(){ alert('you pressed either the b, c, or d key!'); }); 

and finally, what I want is the ability to do, but I can’t understand:

 $(window).jkey('alt+n',function(){ alert('you pressed alt+n!'); }); 

I know how to do this outside the plugin (when setting up the keyboard for var false and setting the key, set var true and check if var is true when you press another key), but I don’t know how to do it when You don’t know which keys will be pressed and how many. How to add this support? I want them to be able to do things like alt+shift+a or a+s+d+f if they want to. I just can't figure out how to implement this. Any ideas?

I am going to release this as an open source plugin, and I would like someone to give me the right, work, answer the loan on the blog and in the code myself. Thanks in advance!

 (function($) { $.fn.jkey = function(keyCombo,callback) { if(keyCombo.indexOf(' ') > -1){ //If multiple keys are selected var keySplit = keyCombo.split(' '); } else{ //Else just store this single key var keySplit = [keyCombo]; } for(x in keySplit){ //For each key in the array... if(keySplit[x].indexOf('+') > -1){ //Key selection by user is a key combo... what now? } else{ //Otherwise, it just a normal, single key command } switch(keySplit[x]){ case 'a': keySplit[x] = 65; break; case 'b': keySplit[x] = 66; break; case 'c': keySplit[x] = 67; break; //And so on for all the rest of the keys } } return this.each(function() { $this = $(this); $this.keydown(function(e){ if($.inArray(e.keyCode, keySplit) > -1){ //If the key the user pressed is matched with any key the developer set a key code with... if(typeof callback == 'function'){ //and they provided a callback function callback(); //trigger call back and... e.preventDefault(); //cancel the normal } } }); }); } })(jQuery); 

Answer 1

Here is what I came up with. Essentially, I created a JSON object that stores all the key codes. Then I replace all the provided keys with codes. If the keys use "+" to create a key combination, then I create an array of codes from it.

Then we create another array in which all the keys pressed are stored (keyDown adds an element, keyUp removes it). In keyDown, we check if this is one key command or combo. If it is a combo, we check it for all current active keystrokes. If they all match, we perform a callback.

This will work with any number of key combinations. Only once I saw that it does not work when you use "alert ()" to display a message in a command of keys, because it will no longer remove elements from the array of keystrokes of the active key.

 (function($) { $.fn.jkey = function(keyCombo,callback) { // Save the key codes to JSON object var keyCodes = { 'a' : 65, 'b' : 66, 'c' : 67, 'alt' : 18 }; var x = ''; var y = ''; if(keyCombo.indexOf(' ') > -1){ //If multiple keys are selected var keySplit = keyCombo.split(' '); } else{ //Else just store this single key var keySplit = [keyCombo]; } for(x in keySplit){ //For each key in the array... if(keySplit[x].indexOf('+') > -1){ //Key selection by user is a key combo // Create a combo array and split the key combo var combo = Array(); var comboSplit = keySplit[x].split('+'); // Save the key codes for each element in the key combo for(y in comboSplit){ combo[y] = keyCodes[ comboSplit[y] ]; } keySplit[x] = combo; } else { //Otherwise, it just a normal, single key command keySplit[x] = keyCodes[ keySplit[x] ]; } } return this.each(function() { $this = $(this); // Create active keys array // This array will store all the keys that are currently being pressed var activeKeys = Array(); $this.keydown(function(e){ // Save the current key press activeKeys[ e.keyCode ] = e.keyCode; if($.inArray(e.keyCode, keySplit) > -1){ // If the key the user pressed is matched with any key the developer set a key code with... if(typeof callback == 'function'){ //and they provided a callback function callback(); //trigger call back and... e.preventDefault(); //cancel the normal } } else { // Else, the key did not match which means it either a key combo or just dosn't exist // Check if the individual items in the key combo match what was pressed for(x in keySplit){ if($.inArray(e.keyCode, keySplit[x]) > -1){ // Initiate the active variable var active = 'unchecked'; // All the individual keys in the combo with the keys that are currently being pressed for(y in keySplit[x]) { if(active != false) { if($.inArray(keySplit[x][y], activeKeys) > -1){ active = true; } else { active = false; } } } // If all the keys in the combo are being pressed, active will equal true if(active === true){ if(typeof callback == 'function'){ //and they provided a callback function callback(); //trigger call back and... e.preventDefault(); //cancel the normal } } } } } // end of if in array }).keyup(function(e) { // Remove the current key press activeKeys[ e.keyCode ] = ''; }); }); } })(jQuery); 

Answer 2

Use keypress instead of keyup / keydown, because the last two do not protect the key code very carefully ( link , see last paragraph). You can refer to the altKey ctrlKey and shiftKey boolean properties of the event object in this case ...

 $(document).keypress(function(e) { var key = String.fromCharCode(e.which); var alt = e.altKey; var ctrl = e.ctrlKey var shift = e.shiftKey; alert("Key:" + key + "\nAlt:" + alt + "\nCtrl:" + ctrl + "\nShift:" + shift); }); 

Alternatively, you can use String.fromCharCode to translate the key code into the actual letter.

You cannot catch multiple keys, except for combinations with Ctrl, Alt and Shift. You simply cannot do this in one case. So drop the idea of a+s+d+f from the window.

Note. Obviously, there are certain key combinations that are used by the browser. For example, Alt + F usually brings up the File menu on Windows. Ctrl + N usually launches a new window / tab. Do not try to override any of these combinations.

Here's a live demo for your testing enjoyment.

Answer 3

It’s just a shot in the dark, but maybe it will help you on the right track.

If it is possible for this function to recognize the hexadecimal value for the key you entered instead of the letter key (for example, 0x6E for the letter "n"), you could get that "alt + n" is translated in hexadecimal format and the function performs this function.

Answer 4

If you are looking for something that will allow the user to easily enter and define key combos using a simple input field, I wrote a plugin that will do it for you: http://suan.github.com/jquery-keycombinator/