Use dojo/keys For Key Press Events in DOJO

If you are working in JavaScript, getting the key press events is necessary to perform any user initiated operations. DOJO provides dojo/keys module to perform all the key events. dojo/keys module defines the constants for each type of key with the corresponding key code. This helps us to import this module and directly use it in our code. Almost all the important keys are defined in this module. Look at the below example to understand how to use this module to capture the key events.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script>
	var dojoConfig = {
		baseUrl : "src",
		packages : [ {
			name : "dojo",
			location : "dojo"
		}, {
			name : "dijit",
			location : "dijit"
		}, {
			name : "dojox",
			location : "dojox"
		}, {
			name : "app",
			location : "app"
		}, ],
		parseOnLoad : true,
		async : true
	};
</script>
<script src="src/dojo/dojo.js"></script>
<script>
require(["dojo/on",
         "dojo/keys",
         "dojo/domReady!"],
		function(on, keys, dom){
		  on(document, "keyup", function(event){
			  alert (event.keyCode);
			  switch (event.keyCode)
			  {
			  case keys.UP_ARROW:
				  alert ("Up Arrow Pressed!!");
				  break;
			  case keys.DOWN_ARROW:
				  alert ("Down Arrow Pressed!!");
				  break;
		  	  case keys.ENTER:
		  		  alert ("Enter Pressed!!");
			 	 break;
			  }
		  });
		});
</script>
</head>
<body>
	<h1>Enter Value</h1>
    <input type="text" id="keyCode" size="2">
</body>
</html>

The above example is easy to understand how to capture the key press events on DOJO application.

About Krishna Srinivasan

Reader Interactions

Leave a Reply Cancel reply