Question

I’m working yet on a small script to capture keyevents and easily bind functions on them. But I’m stuck for now!

The problem is, that if I initalize more than one “eventhandler” it overides arguments from the first initialization.

Thousands of words do not say more than some lines of code. So, here’s what I’ve done so far:

var keyCodes={a:65,b:66,c:67,d:68,e:69,f:70,g:71,h:72,i:73,j:74,k:75,l:76,m:77,n:78,o:79,p:80,q:81,r:82,s:83,t:84,u:85,v:86,w:87,x:88,y:89,z:90,"0":48,"1":49,"2":50,"3":51,"4":52,"5":53,"6":54,"7":55,"8":56,"9":57,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123,shift:16,ctrl:17,control:17,alt:18,option:18,opt:18,cmd:224,command:224,fn:255,"function":255,backspace:8,"delete":8,enter:13,"return":13,left:37,up:38,right:39,down:40};

var keyCall = function(k, fn, c, e, k2, nk) {
    this.onkeydown = function() {
        nk = k.split(" ");
        c = e ? e.which : event.keyCode;
        if (nk.length > 1) {
            if (keyCodes[nk[0]] === c) {
                k2 = true;
            }
            if (keyCodes[nk[1]] === c && k2 === true) {
                fn();
                k2 = false;
            }
        } else if (keyCodes[nk[0]] === c) {
            fn();
        }
    };
};


keyCall('ctrl a', function() { // overridden by `keyCall('shift a'`
    alert('callback1');
});

keyCall('shift a', function() {
    alert('callback2');
});

I’ve optimized it for a highly minimum of bytes, if you think an annotated version is usefull, so just say it! For everyone who needs, here’s a fiddle

Update

pascalfree has fixed it! But anoter problem is now coming up…

The “placeholder”-variable k2 checks if the first key was/is pressed. But for now if you press and release ctrl and hit thereafter the a-key the function will fired. Any ideas?

Answer 1

I assume the onKeyPress event is bound to some html element like this:

keyCall.apply( window.body, ['shift a', function() { alert('a') }] );

In order to append additional events you can check if an eventhandler already is defined and call it in your new function:

var keyCall = function(k, fn, c, e, k2, nk) {
    var oldOnkeydown = this.onkeydown; //get old event handler
    this.onkeydown = function() {
        if( typeof oldOnkeydown == "function" ) { oldOnkeydown() } //call in new eventhandler.
        nk = k.split(" ");
        c = e ? e.which : event.keyCode;
        if (nk.length > 1) {
            if (keyCodes[nk[0]] === c) {
                k2 = true;
            }
            if (keyCodes[nk[1]] === c && k2 === true) {
                fn();
                k2 = false;
            }
        } else if (keyCodes[nk[0]] === c) {
            fn();
        }
    };
    //reset k2 onkeyup
    var oldOnkeyup = this.onkeyup;
    this.onkeyup = function() {
      if( typeof oldOnkeyup == "function" ) { oldOnkeyup() }
      k2 = false;
    };
};

I only added the 2 lines with comments. (+ onkeyup event at the end to solve problem from comments)

Source: http://www.webreference.com/programming/javascript/onloads/index.html