Keys Object to read the keyboard

[rdspoons]

Use this keys object code to add keyboard functionality.
Works with IE, Gecko, WebKit


The keys object has only one method:
keys.addWatcher(keyCode,fnc,fnc2)

keyCode can be either an ascii integer key value or an array of ascii integer key values.

fnc is a callback function for the keydown event. It can be either a function or a function reference.

fnc2 is an optional callback function for the keyup event. It can be either a function or a function reference.




/********************************************************
* Add this keys object to a page and add functions to quickly
* handle keydown/keyup events.
* Methods: keys.addWatcher(keyCode,fnc,fnc2)
* IN: 1) keyCode = integer ascii key value
* 2) keyCode = Array of integer ascii key values
* fnc = function or function reference to
* call on a key-down event
* fnc2 = optional funcion or function reference to
* call on a key-up event
********************************************************/
var keys=(function(){
var KEY=[];
var KEYUP=[];
var addWatcher=function(keyCode,fnc,fnc2){
if(keyCode.constructor.toString().indexOf("Array")>-1){
if(fnc2)
for(var i=0;i<keyCode.length;i++)
KEYUP[keyCode[i]]=fnc2;
for(var i=0;i<keyCode.length;i++)
KEY[keyCode[i]]=fnc;
}else{
if(fnc2)
KEYUP[keyCode]=fnc2;
KEY[keyCode]=fnc;
}
}
var commonCode=function(){
document.onkeydown=function(e){
var e=e||window.event;
if(KEY[e.keyCode])
KEY[e.keyCode](e.keyCode);
}
document.onkeyup=function(e){
var e=e||window.event;
if(KEYUP[e.keyCode])
KEYUP[e.keyCode](e.keyCode);
}
document.body.focus();
}
if(window.addEventListener){
window.addEventListener("load", commonCode, true);
}else if(window.attachEvent){
var r=window.attachEvent("onload", commonCode);
}else{
window["onload"] = function(){commonCode()};
}
return {addWatcher:function(keyCode,fnc,fnc2){addWatcher(keyCode,fnc,fnc2)}}
})();





Simple demonstration use:

You add a key handler by calling the addWatcher method.
The addWatcher method can be assigned before or after the document is loaded.


Here a key watcher is assigned a function to run when the keydown event occurs.


//Add a keyhandler for A(65) by passing a function for the keydown event
keys.addWatcher(65, function(){var d = document.createElement("span");d.innerHTML="A";document.body.appendChild(d)});





Here a key watcher is assigned a function to run when the keydown or keyup events occur.


//Add a keyhandler for B(65) by passing a function for the keydown and keyup events
keys.addWatcher(66,
function(){var d = document.createElement("span");d.innerHTML="B Down";document.body.appendChild(d)},
function(){var d = document.createElement("span");d.innerHTML="B Up";document.body.appendChild(d)}
);





Here a key watcher is assigned a function reference to call when the keydown event occurs.


//Add a keyhandler for C(67) and D(66) by passing a function refernce
keys.addWatcher(67, handleKeyDown);
keys.addWatcher(68, handleKeyDown);





Here a set of key watchers are assigned a common function reference to call when the keydown event occurs.


//Add a common keyhandler for X(88), Y(89) and Z(90) by passing a common function refernce
keys.addWatcher([88,89,90], handleKeyDown);





Here is a simple example of a callback handler - the keys object will automatically pass the ascii key value to work with


function handleKeyDown(k)
{
switch(k)
{
case(67):alert("C - OK");break;
case(68):alert("D - OK");break;

case(88):alert("X - OK");break;
case(89):alert("Y - OK");break;
case(90):alert("Z - OK");break;
}
}




keys is a pseudo non-blocking keyboard object = you can read more than one key at a time.
This next example assumes two divs exists with id's "d1" and "d2".
The code will display 0 or 1 in ecah div depending on wheteher the 'E' and 'F' keys are pressed or not.


keys.addWatcher(69, // E
function(){document.getElementById("d1").innerHTML="1"},
function(){document.getElementById("d1").innerHTML="0"}
);
keys.addWatcher(70, // F
function(){document.getElementById("d2").innerHTML="1"},
function(){document.getElementById("d2").innerHTML="0"}
);





You can obviously alter the commonCode to respond to a particular object instead of the document, if desired.



provided by rdspoons