About Me

My photo
Talk to me... you will know

Monday, September 05, 2011

exploring event.keycode in javascript


Sets or retrieves the Unicode key code associated with the key that caused the event.
Syntax

[ sKeyCode = ] object.keyCode
Possible Values
sKeyCode Integer that specifies or receives the Unicode key code.
The property is read/write. The property has no default value.
Remarks
The property is used with the onkeydown, onkeyup and onkeypress events.
The property's value is 0 if no key caused the event.
Standards Information
There is no public standard that applies to this property.


For more info you can visit:


for a demo of the same download the following file.. the source is in the html 





<!--var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;

/*
 *
 *var someVar = (...some condition to check...) ? valueIfTrue : valueIfFalse;
 *
 *the syntax has some extra details I'm not much familiar with.
 *
 *That's a compound statement - it uses two, nested, ternary operators. It's clearer when you add parentheses:
 *
 *So if the first test (event.keyCode) fails, the second value is used, which is itself the result of another ternary operator. If the second test (event.which) fails, the final value (event.charCode) is used.
 *priority wise:
 *event.keyCode>event.which>event.charCode
 *
*/

var keyCode = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));

/*
 *
 *For a demo of this pls paste the following code:
 *Save as KeyCode.html and run.... :)
 *
*/
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>JavaScript Event KeyCode Test Page</title> 
<script type="text/javascript"> 
focusInput = function()
{
document.getElementById("input").focus();
};
clear = function()
{
var eventTypes = ["onkeydown", "onkeypress", "onkeyup"];
var codeTypes = ["keycode", "charcode", "which"];
for(var event = 0; event < eventTypes.length; event++)
{
for(var code = 0; code < codeTypes.length; code++)
{
var element = document.getElementById(eventTypes[event] + "_" + codeTypes[code]);
while (element.firstChild != null)
{
element.removeChild(element.firstChild);
}
}
}
};
processKeyEvent = function(eventType, event)
{
if (window.event)
{
event = window.event;
}
var element = document.getElementById(eventType + "_keycode");
var text = document.createTextNode("'" + event.keyCode + "'");
element.appendChild(text);
element = document.getElementById(eventType + "_charcode");
text = document.createTextNode("'" + event.charCode + "'");
element.appendChild(text);
element = document.getElementById(eventType + "_which");
text = document.createTextNode("'" + event.which + "'");
element.appendChild(text);
};
processKeyDown = function(event)
{
clear();
processKeyEvent("onkeydown", event);
};

processKeyPress = function(event)
{
processKeyEvent("onkeypress", event);
};

processKeyUp = function(event)
{
processKeyEvent("onkeyup", event);
};
</script> 
</head> 
<body> 
<marquee>
<h1>Dark Mage</h1> 
</marquee>
<p>Input: <input id="input" type="text" value=""/></p> 
<table border="1" align="center"> 
<thead> 
<tr> 
<th></th> 
<th>onKeyDown</th> 
<th>onKeyPress</th> 
<th>onKeyUp</th> 
</tr> 
</thead> 
<tr> 
<th>event.keyCode</th> 
<TD id="onkeydown_keycode"></td> 
<td id="onkeypress_keycode"></td> 
<td id="onkeyup_keycode"></td> 
</tr> 
<tr> 
<th>event.charCode</th> 
<td id="onkeydown_charcode"></td> 
<td id="onkeypress_charcode"></td> 
<td id="onkeyup_charcode"></td> 
</tr> 
<tr> 
<th>event.which</th> 
<td id="onkeydown_which"></td> 
<td id="onkeypress_which"></td> 
<td id="onkeyup_which"></td> 
</tr> 
</table> 
<script> 
window.onload=focusInput;
document.getElementById("input").onkeydown=processKeyDown;
document.getElementById("input").onkeypress=processKeyPress;
document.getElementById("input").onkeyup=processKeyUp;
</script> 
</body> 
</html> 

No comments:

Post a Comment