jQuery Javascript arrow Keycodes

Written by Tony Lea on Oct 20th, 2010 Views Report Post

When using Javascript and building a web interface, there may come a time when you want to be able to detect when the arrow keys are being pressed. This cannot be done using the standard jQuery .keypress() function. Instead you have to use some alternate code to perform this functionality. It is actually quite simple. The following example displays how you can capture arrow key events, both 'up' and 'down' state.

<script type="text/javascript">
	
	KEY_CODES = {
	  37: 'left',
	  38: 'up',
	  39: 'right',
	  40: 'down'
	}
	
	KEY_STATUS = { keyDown:false };
	for (code in KEY_CODES) {
	  KEY_STATUS[KEY_CODES[code]] = false;
	}
	
	$(window).keydown(function (e) {
	  
	  KEY_STATUS.keyDown = true;
	  e.preventDefault();
	  
	  // perform functionality for keydown
	  if (KEY_CODES[e.keyCode]) {
	  	if(e.keyCode == 40)
	  	{
	  		// Arrow Down 
	  	}
	  	
	  	else if(e.keyCode == 39)
	  	{
	  		// Arrow Right	
	  	}
	  	
	  	else if(e.keyCode == 38)
	  	{
	  		// Arrow Up	
	  	}
	  	
	  	else if(e.keyCode == 37)
	  	{
	  		// Arrow Left	
	  	}
	  	
	  }
	  
	}).keyup(function (e) {
	  KEY_STATUS.keyDown = false;
	  if (KEY_CODES[e.keyCode]) {	  	
	    e.preventDefault();
	    KEY_STATUS[KEY_CODES[e.keyCode]] = false;
	  }
	});

</script>

Comments (0)