Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts

    Keys Object to read the keyboard

    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.


    Code:
    /********************************************************
     * 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.
    Code:
    //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.
    Code:
    //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.
    Code:
    //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.
    Code:
    //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
    Code:
    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.
    Code:
    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
    Last edited by rdspoons; 08-23-2010 at 08:53 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •