{"id":35,"date":"2009-06-16T20:58:27","date_gmt":"2009-06-16T20:58:27","guid":{"rendered":"http:\/\/www.gmarwaha.com\/blog\/?p=35"},"modified":"2014-09-14T05:16:21","modified_gmt":"2014-09-14T05:16:21","slug":"ctrl-key-combination-simple-jquery-plugin","status":"publish","type":"post","link":"https:\/\/www.gmarwaha.com\/blog\/2009\/06\/16\/ctrl-key-combination-simple-jquery-plugin\/","title":{"rendered":"Ctrl + Key Combination – Simple Jquery Plugin"},"content":{"rendered":"

In a recent web application I was working on, I had a need for the “Ctrl + S” hotkey to save an entry to the database. Being a an avid jquery fan, I immediately searched the plugin repository for any plugin that fits the bill. I was not very surprised to find a very comprehensive jshotkeys<\/a> plugin. It was feature rich and addressed all the requirements for hotkeys in a jquery powered application and obviously my requirement was fulfilled as well.<\/p>\n

But the basic issue (and advantage too) with any plugin is that it is written for a wide range of audience. So, although my requirement was only for a “Ctrl + key” combination, I had to part with my bandwidth for all other features this plugin offered. Like my famous jCarouselLite<\/a> plugin, I like my javascript code kept to the minimum. So, I decided and wrote a short yet sweet plugin that would solve only the problem I have at hand. Unsurprisingly, the plugin code turned out to be only 195 bytes<\/strong> (minified). Given below is the code for the same…<\/p>\n

\r\n$.ctrl = function(key, callback, args) {\r\n    var isCtrl = false;\r\n    $(document).keydown(function(e) {\r\n        if(!args) args=[]; \/\/ IE barks when args is null\r\n        \r\n        if(e.ctrlKey) isCtrl = true;\r\n        if(e.keyCode == key.charCodeAt(0) && isCtrl) {\r\n            callback.apply(this, args);\r\n            return false;\r\n        }\r\n    }).keyup(function(e) {\r\n        if(e.ctrlKey) isCtrl = false;\r\n    });        \r\n};\r\n<\/pre>\n
This is how it works:<\/p>\n
1. <\/strong>You want to execute a function when the user presses a “Ctrl + key” combination.
\n2. <\/strong>You as a developer should call the plugin method and pass in 3 parameters.
\n3. <\/strong>1st<\/sup> Param:<\/em> The “key” user should press while he is pressing Ctrl.
\n4. <\/strong>2nd<\/sup> Param:<\/em> The callback function to be executed when the user presses “Ctrl + key”.
\n5. <\/strong>3rd<\/sup> Param:<\/em> An optional array of arguments, that will be passed to the callback function.<\/p>\n
In the code given below, when the user presses the “Ctrl + S” key combination, the anonymous callback function passed in as the second parameter is called. <\/p>\n
\r\n$.ctrl('S', function() {\r\n    alert(\"Saved\");\r\n});\r\n<\/pre>\n
Here, when the user presses the “Ctrl + S” key combination, the anonymous callback function passed in as the second parameter is called with the arguments passed in as the third parameter.<\/p>\n
\r\n$.ctrl('D', function(s) {\r\n    alert(s);\r\n}, [\"Control D pressed\"]);\r\n<\/pre>\n
Thats it. I feel it is simple yet effective and solves a common requirement in modern web applications. <\/p>\n
What do you think?<\/p>\n
\n
Update<\/h2>\n
\nA comment provided by “A Nony Mouse” in this blog entry clarified that, we don’t have to store a boolean called “isCtrl” to check if the “Ctrl” key is down while another key is being pressed. It is enough to check for e.ctrlKey as it will return true if the “Ctrl” key is down even if another key is being pressed along with Ctrl. Based on that input the “Ctrl + Key” plugin has been updated. Take a look at the updated code below. For archiving purposes, I am leaving the original version of the code above without any changes.\n<\/p>\n
\r\n$.ctrl = function(key, callback, args) {\r\n    $(document).keydown(function(e) {\r\n        if(!args) args=[]; \/\/ IE barks when args is null \r\n        if(e.keyCode == key.charCodeAt(0) && e.ctrlKey) {\r\n            callback.apply(this, args);\r\n            return false;\r\n        }\r\n    });        \r\n};\r\n<\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
In a recent web application I was working on, I had a need for the “Ctrl + S” hotkey to save an entry to the database. Being a an avid jquery fan, I immediately searched the plugin repository for any plugin that fits the bill. I was not very surprised to find a very comprehensive jshotkeys plugin. It was feature rich and addressed all the requirements for hotkeys in a jquery powered application and obviously my requirement was fulfilled as well. But the basic issue (and advantage too) with any plugin is that it is written for a wide range... 
Continue reading...<\/a>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,4,8],"tags":[],"class_list":["post-35","post","type-post","status-publish","format-standard","hentry","category-client-side","category-javascript","category-jquery"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.gmarwaha.com\/blog\/wp-json\/wp\/v2\/posts\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gmarwaha.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gmarwaha.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gmarwaha.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gmarwaha.com\/blog\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":30,"href":"https:\/\/www.gmarwaha.com\/blog\/wp-json\/wp\/v2\/posts\/35\/revisions"}],"predecessor-version":[{"id":809,"href":"https:\/\/www.gmarwaha.com\/blog\/wp-json\/wp\/v2\/posts\/35\/revisions\/809"}],"wp:attachment":[{"href":"https:\/\/www.gmarwaha.com\/blog\/wp-json\/wp\/v2\/media?parent=35"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gmarwaha.com\/blog\/wp-json\/wp\/v2\/categories?post=35"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gmarwaha.com\/blog\/wp-json\/wp\/v2\/tags?post=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}