Web Speaks: Identify KeyCodes with Jquery

Wednesday, May 26, 2010

Identify KeyCodes with Jquery

Identifying the keyCodes of the keyboard can be extremely useful in situations like validating the input from users or making some special action an pressing a particular key. This tutorial shows you a simple way of identifying the keyCodes of the keyboard keys. Jusrt check out the live demo.

Live demo

Jquery Code

<script language="javascript">
$(document).ready(function()
{
 var notify = function()
 {
         $('#result').empty().html('KeyCode : '+event.keyCode);
 };
 $('#text').keyup(function()
 {
  notify();
 });
});

</script>
<body>
</head>
<div id="main">
<div class="heading">Know Your KeyCode</div>
<textarea id="text"></textarea><br />
<label>Enter Any key to know its keyCode</label>
<div id="result"></div>
</div>
</body>

CSS

body{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
}
#main{
width:300px;
padding:10px;
text-align:center;
}
#text{
color:#CC6633;
border:2px solid #ff00ff;
height:90px;
width:300px;
}
#result{
border:2px solid #ececec;
color:#996633;
margin:10px;
width:300px;
}
.heading{
background-color:#2859AA;
border:1px solid #121649;
color:#FFFFFF;
font-weight:bold;
padding:3px;
width:300px;
text-align:center;
}