PLATFORM
  • Tails

    Create websites with TailwindCSS

  • Blocks

    Design blocks for your website

  • Wave

    Start building the next great SAAS

  • Pines

    Alpine & Tailwind UI Library

  • Auth

    Plug'n Play Authentication for Laravel

  • Designer comingsoon

    Create website designs with AI

  • DevBlog comingsoon

    Blog platform for developers

  • Static

    Build a simple static website

  • SaaS Adventure

    21-day program to build a SAAS

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)

loading comments