Discussion on jQee - Keyboard Shortcuts for jQuery

Discussion on jQee - Keyboard Shortcuts for jQuery

4.88 (8 ratings) 4.88 stars
Cart 52 sales

offsound does not currently provide support for this item.

7 comments found.

Does this plugin support namespacing?


I execute the entire plugin in an anonymous function pattern so it doesn’t pollute the global namespace:

  $.jQee = function() {};

  $.fn.jQee = function() {  
    return this.each(function() {  


If this is not what you’re referring to, could you be more specific? I’m not exactly sure what you mean by “support namespacing”.

Thanks, Josh

Sure, in the latest jQuery they introduced the .on() and .off() event handling methods, they allow you to namespace your events.

i.e. $(selector).on(‘’, function(){ });

to detach all event handlers in the plugin then you just need to $(selector).off(’.my-plugin-name’); and it will remove all handlers bound to that element of the event namespace ’.my-plugin-name’.


Name spaces didn’t cross my mind when I was developing, so jQee doesn’t exactly have any namespacing features.

However, it doesn’t interfere with the namespaces you might have created elsewhere because I’m using jQuery.event.special to add my custom handlers, which were designed to ignore non-jQee binds/unbinds. So I guess I sort of made my own namespace, just for jQee, if you will.

I did a quick test (jQuery 1.7) to prove it:

  <input id="test" type="text" />

  <script type="text/javascript">
    $(function() {
      $("#test").on("keydown.hasnamespace", function(e){
        alert("Has namespace, and still here.");

      $("#test").on("keydown", function(e){
        alert("No namespace, and still here.");

      $("#test").jQee("j", function(e) {
        /* jQee is using keydown event behind the scenes */


In the example above, if you type the letter ‘j’ in the input box, you’ll get the two alert boxes. jQee does nothing, since its keydown event was removed with by the $.jQee.unbind("j"); call.

With all that being said, thanks to your question, I actually found (and fixed) a bug with the $.jQee.unbind() method. It was only working on document wide shortcuts. I had neglected to use the specific selector when unbinding. I will be submitting a fixed version—I’m not sure how long they take to approve changes, but it’ll be fixed as soon as they approve it.

Thanks, Josh

Is it possible to add MacOS command button support?

Edit: just found that it is META key :) Thanks!

p.s. but looks like not all browser under control – META +N works in FF, but in Chrome is still the same function.


Thanks for the purchase! I’m sorry I didn’t see your comment until just now.

Due to the wide variations between operating systems and browsers, I wasn’t sure how to document the meta key, so I left it as an undocumented feature. Maybe I should document it, as it does in fact work, just not consistently between the various platforms.

However, after looking into your issue at hand, it appears to be a security feature of Chrome that is preventing jQee from binding to META +N (it does the same thing for me with Ubuntu/Chrome using CTRL +N, CTRL +T and CTRL +W). As of Chrome4+ they have prevented JavaScript from overriding these shortcuts. You can see the issue here: . They’ve marked the issue as “WontFix”—which is unfortunate.

I wish there was something I could do to make this work for you, but I don’t believe there’s a way to fix this.

On the caveat section of my site, I do mention that some browsers restrict the overriding of certain pre-existing shortcuts: . Maybe I should make this information more prominent and specific, as it wasn’t my intention to mislead potential buyers. Eventually I plan on creating a grid which shows which browsers allow the overriding of each shortcut.

Let me know if there’s anything else I can do to help, Josh

I am newbie Javascript developer. I bought the plugin, so far it has worked pretty well. Thanks a lot…

I have one question in regarding the “Cavaets” you had stated at the end of your online document:

“If you define a document wide shortcut, but the focus is in an input field, the shortcut won’t work unless you also add it to that field (or class of fields).”

Can you further explain this? Because I think I having a similar problem.

Thanks again.


Basically what I was saying there is that if you define a shortcut such as:

var shortcutFunction = function() {
   alert('hit shortcut');
$.jQee('shift+s', shortcutFunction);

That shortcut won’t work if the focus is in an input field (anywhere the user might be typing text). A way around that could be something like this:

/* trigger everywhere except input fields*/
$.jQee('shift+s', shortcutFunction); 

/* trigger in all input fields*/
$('input').jQee('shift+s', shortcutFunction);

/* trigger in all textarea fields*/
$('textarea').jQee('shift+s', shortcutFunction);

Also, you could be more explicit and define a certain input class/id, if you don’t want the shortcut to work in every input field on the page:

$('#myForm input').jQee('shift+s', shortcutFunction);

Disclaimer: the above is untested. Let me know if this doesn’t make sense or something still isn’t clear.

Thanks for your purchase!



Great plugin, works really well. So thank you!

Is there of making it work on live content? I put a keyboard shortcut to submit a comment (alt+enter) which reloads the content … turns out quite a few of my users post several comments at the time and it doesn’t work.

Thanks, Denis


Sorry it took so long to reply, I wish CodeCanyon would send me notifications.

Anyway, no there currently isn’t a direct way to do this yet, but it’s not impossible. I don’t know exactly what you’re doing, but if you define the jQee shortcuts after you inject live content, it will work. Look at this crude example:

<script type="text/javascript">
  $('#button').on('click', function(e) {
    /* add some live content */
    $('#placeholder').html('<input type="text" class="newelement" />');

    /* Now tell this new content to respond to shortcuts */        
    $('.newelement').jQee('alt+enter', function(e) {
      alert('Hi There!');
<button id="button">Inject Live Content</button>
<br />
<div id="placeholder">PLACEHOLDER</div>

Thanks for pointing out this shortcoming, as I can see it being a useful feature. I will add this to my feature list for a possible future update.


Thanks for the good work! I’ve seen similar libraries, but I’m glad to see you’re refining the process.

Suggestion: Use the “data-key” attribute when applied to “button” elements… auto-trigger the button click event when the key-combo is pressed. Right now, you only have the launch url option for “a” elements, but I’m definitely going to wire it up to click events as well. Just an idea you might want to include.

great work mate. good luck