Forums

JohnMotylJr

Howdy, is there any kind of ternary or shorthand method for this. Maybe even a switch case?

$document.on({
   keydown: function(event) {
       // F5
      if (event.which == 116) { return true; }
       // Ctrl + A
      if ((event.ctrlKey && event.which == 097) || (event.ctrlKey && event.which == 65)) { return true; }
      // Ctrl + X
      if ((event.ctrlKey && event.which == 120) || (event.ctrlKey && event.which == 88)) { return true; }
      // Ctrl + C 
      if ((event.ctrlKey && event.which == 099) || (event.ctrlKey && event.which == 67)) { return true; }
      // Ctrl + Z
      if ((event.ctrlKey && event.which == 122) || (event.ctrlKey && event.which == 90)) { return true; }
      // Ctrl + V
      if ((event.ctrlKey && event.which == 118) || (event.ctrlKey && event.which == 86)) { return true; }
      //.... etc

Mottie

Hi John!

I'm sure there is an even more efficient way than this method (maybe using a for in loop), but this is what I came up with (demo):

var allowed = {
    key: [116],
    ctrl: [65, 67, 86, 88, 90, 97, 99, 118, 120, 122],
    alt: []
};

$(document).on({
    keydown: function(event) {
        var k = event.which;
        // regular key
        if ($.inArray(k, allowed.key) >= 0) {
            return true;
        }
        // ctrl keys
        if (event.ctrlKey && $.inArray(k, allowed.ctrl) >= 0) {
            return true; 
        }
        // alt keys - added just in case ;)
        if (event.altKey && $.inArray(k, allowed.alt) >= 0) {
            return true;
        }
    }
});

JohnMotylJr

@Mottie

I am totally going to check this out now.

I am somewhat new to the whole js / jQuery thang but is there any way to test javascript / jQuery code for efficiency? Because whether i run this as a loop, if stack, switch case, on vs live vs keydown etc, Im not sure if im trying to make this more difficult on myself.

jamy_za

http://jsperf.com/

Specifically referring to javascript without libraries: I think you should probably write it however you feel it is easier to read. The performance differences between the various methods are so small you wouldn't notice it most of the time. Also, you may find for statements are faster than whiles in certain situations or in different browsers, etc.

Do whatever is nicest for you. I think you'll pick up efficiency tips as you go along. Best not to get too caught up with that now.

Mottie

I agree with Jamy, don't worry too much about efficiency. If it runs fast enough in IE7 then it's good.

I just realized the thing that is missing in the code... it needs a filter to allow alphabetic keys through and a return false at the end (demo).

var allowed = {
    key: [116],
    ctrl: [65, 67, 86, 88, 90, 97, 99, 118, 120, 122],
    alt: []
};

$(document).on({
    keydown: function(event) {
        var k = event.which;
        // regular key
        if ($.inArray(k, allowed.key) >= 0) {
            log('allowed ' + k);
            return true;
        }
        if (event.ctrlKey && $.inArray(k, allowed.ctrl) >= 0) {
            log('allowed ctrl+' + k);
            return true;
        }
        if (event.altKey && $.inArray(k, allowed.alt) >= 0) {
            log('allowed alt+' + k);
            return true;
        }
        // allow 0-9, a-z and A-Z
        if ((!event.ctrlKey || !event.altKey) &&
            (k >= 48 && k <= 57) ||
            (k >= 65 && k <= 90) ||
            (k >= 97 && k <= 122)) {
            log('allowed ' + k);
            return true;
        }
        return false;
    }
});

jamy_za

I just came across a pretty cool jQuery efficiency article you may be interested in: http://24ways.org/2011/your-jquery-now-with-less-suck

treehouse : what would you like to learn today?

Forums

Can i shorthand these 'if statements'?

@Mottie