andy-h
9/30/2015 - 2:49 PM

Display values given for keyboard events.

Display values given for keyboard events.

<!DOCTYPE html>

<html lang="en">
<head>
	
	<!-- to prevent IE from using compatibility mode -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	
	<meta charset="UTF-8">
	
	<title>keyboard event values</title>
	
	<style type="text/css" media="all">
		body {
			font-family:sans-serif;
		}
		table {
			border-collapse:collapse;
			float:left;
			margin:0 2em 1.25em 0;
		}
		th, td {
			border:1px solid #888;
			padding:3px;
			min-width:2em;
		}
		tr:nth-child(n+1):nth-child(-n+7) td:nth-child(2) span {
			text-decoration:underline;
		}
		td:nth-child(2) {
			white-space:pre;
		}
		.deprecated {
			background-color:#FEE;
		}
		.lastInGroup {
			border-bottom-style:double;
		}
	</style>
	
</head>
<body>
	
	<p>
	<label for="testBox">Press a key in this text box.</label><br>
	<input type="text" id="testBox"> <span id="repeating"></span><span id="refocus" tabindex=0></span>
	</p>
	
	<table>
		<tr>
			<th colspan="2">keydown</th>
		</tr>
		<tr>
			<td>code</td>
			<td id="codeDown"></td>
		</tr>
		<tr>
			<td>key</td>
			<td id="keyDown"></td>
		</tr>
		<tr class="deprecated lastInGroup">
			<td>char</td>
			<td id="charDown"></td>
		</tr>
		<tr class="deprecated">
			<td>charCode</td>
			<td id="charCodeDown"></td>
		</tr>
		<tr class="deprecated">
			<td>keyCode</td>
			<td id="keyCodeDown"></td>
		</tr>
		<tr class="deprecated lastInGroup">
			<td>which</td>
			<td id="whichDown"></td>
		</tr>
		<tr>
			<td>shiftKey</td>
			<td id="shiftKeyDown"></td>
		</tr>
		<tr>
			<td>ctrlKey</td>
			<td id="ctrlKeyDown"></td>
		</tr>
		<tr>
			<td>altKey</td>
			<td id="altKeyDown"></td>
		</tr>
		<tr class="lastInGroup">
			<td>metaKey</td>
			<td id="metaKeyDown"></td>
		</tr>
		<tr>
			<td>location</td>
			<td id="locationDown"></td>
		</tr>
		<tr class="lastInGroup">
			<td>isComposing</td>
			<td id="isComposingDown"></td>
		</tr>
		<tr>
			<td>repeat</td>
			<td id="repeatDown"></td>
		</tr>
	</table>
	
	<table>
		<tr>
			<th colspan="2">keypress</th>
		</tr>
		<tr>
			<td>code</td>
			<td id="codePress"></td>
		</tr>
		<tr>
			<td>key</td>
			<td id="keyPress"></td>
		</tr>
		<tr class="deprecated lastInGroup">
			<td>char</td>
			<td id="charPress"></td>
		</tr>
		<tr class="deprecated">
			<td>charCode</td>
			<td id="charCodePress"></td>
		</tr>
		<tr class="deprecated">
			<td>keyCode</td>
			<td id="keyCodePress"></td>
		</tr>
		<tr class="deprecated lastInGroup">
			<td>which</td>
			<td id="whichPress"></td>
		</tr>
		<tr>
			<td>shiftKey</td>
			<td id="shiftKeyPress"></td>
		</tr>
		<tr>
			<td>ctrlKey</td>
			<td id="ctrlKeyPress"></td>
		</tr>
		<tr>
			<td>altKey</td>
			<td id="altKeyPress"></td>
		</tr>
		<tr class="lastInGroup">
			<td>metaKey</td>
			<td id="metaKeyPress"></td>
		</tr>
		<tr>
			<td>location</td>
			<td id="locationPress"></td>
		</tr>
		<tr class="lastInGroup">
			<td>isComposing</td>
			<td id="isComposingPress"></td>
		</tr>
		<tr>
			<td>repeat</td>
			<td id="repeatPress"></td>
		</tr>
	</table>
	
	<table>
		<tr>
			<th colspan="2">keyup</th>
		</tr>
		<tr>
			<td>code</td>
			<td id="codeUp"></td>
		</tr>
		<tr>
			<td>key</td>
			<td id="keyUp"></td>
		</tr>
		<tr class="deprecated lastInGroup">
			<td>char</td>
			<td id="charUp"></td>
		</tr>
		<tr class="deprecated">
			<td>charCode</td>
			<td id="charCodeUp"></td>
		</tr>
		<tr class="deprecated">
			<td>keyCode</td>
			<td id="keyCodeUp"></td>
		</tr>
		<tr class="deprecated lastInGroup">
			<td>which</td>
			<td id="whichUp"></td>
		</tr>
		<tr>
			<td>shiftKey</td>
			<td id="shiftKeyUp"></td>
		</tr>
		<tr>
			<td>ctrlKey</td>
			<td id="ctrlKeyUp"></td>
		</tr>
		<tr>
			<td>altKey</td>
			<td id="altKeyUp"></td>
		</tr>
		<tr class="lastInGroup">
			<td>metaKey</td>
			<td id="metaKeyUp"></td>
		</tr>
		<tr>
			<td>location</td>
			<td id="locationUp"></td>
		</tr>
		<tr class="lastInGroup">
			<td>isComposing</td>
			<td id="isComposingUp"></td>
		</tr>
		<tr>
			<td>repeat</td>
			<td id="repeatUp"></td>
		</tr>
	</table>
	
	<script type="text/javascript">
		var test = document.getElementById("testBox");
		
		test.addEventListener("keydown", clear, false);
		test.addEventListener("keydown", displayDown, false);
		test.addEventListener("keydown", repeating, false);
		test.addEventListener("keypress", displayPress, false);
		test.addEventListener("keyup", displayUp, false);
		test.addEventListener("keyup", repeating, false);
		
		test.focus();
		
		document.getElementById("refocus").addEventListener("focus", function (evt){ test.focus(); }, false);
		
		function displayDown(evt){
			document.getElementById("testBox").value = "";
			
			if(true || !evt.repeat){
				update("char");
				update("charCode");
				update("code");
				update("key");
				update("keyCode");
				update("which");
				update("altKey");
				update("ctrlKey");
				update("metaKey");
				update("shiftKey");
				update("repeat");
				update("isComposing");
				update("location");
			}
			else{
				update("repeat");
			}
			
			function update(prop){
				var td = document.getElementById(prop+"Down");
				
				if(typeof evt[prop] !== "undefined"){
					td.innerHTML = "<span>"+(""+evt[prop]).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")+"</span> ";
					
					if(evt[prop] && (prop=="charCode" || prop=="keyCode" || prop=="which")){
						td.innerHTML += "( <span>"+String.fromCharCode(evt[prop])+"</span> ) ";
					}
				}
				else{
					td.innerHTML = "";
				}
			}
		}
		
		function displayPress(evt){
			if(true || !evt.repeat){
				update("char");
				update("charCode");
				update("code");
				update("key");
				update("keyCode");
				update("which");
				update("altKey");
				update("ctrlKey");
				update("metaKey");
				update("shiftKey");
				update("repeat");
				update("isComposing");
				update("location");
			}
			else{
				update("repeat");
			}
			
			function update(prop){
				var td = document.getElementById(prop+"Press");
				
				if(typeof evt[prop] !== "undefined"){
					td.innerHTML = "<span>"+(""+evt[prop]).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")+"</span> ";
					
					if(evt[prop] && (prop=="charCode" || prop=="keyCode" || prop=="which")){
						td.innerHTML += "( <span>"+String.fromCharCode(evt[prop])+"</span> ) ";
					}
				}
				else{
					td.innerHTML = "";
				}
			}
		}
		
		function displayUp(evt){
			if(!evt.repeat){
				update("char");
				update("charCode");
				update("code");
				update("key");
				update("keyCode");
				update("which");
				update("altKey");
				update("ctrlKey");
				update("metaKey");
				update("shiftKey");
				update("repeat");
				update("isComposing");
				update("location");
			}
			else{
				update("repeat");
			}
			
			function update(prop){
				var td = document.getElementById(prop+"Up");
				
				if(typeof evt[prop] !== "undefined"){
					td.innerHTML = "<span>"+(""+evt[prop]).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")+"</span> ";
					
					if(evt[prop] && (prop=="charCode" || prop=="keyCode" || prop=="which")){
						td.innerHTML += "( <span>"+String.fromCharCode(evt[prop])+"</span> ) ";
					}
				}
				else{
					td.innerHTML = "";
				}
			}
		}
		
		function clear(evt){
			if(!evt.repeat){
				update("charPress");
				update("charCodePress");
				update("codePress");
				update("keyPress");
				update("keyCodePress");
				update("whichPress");
				update("altKeyPress");
				update("ctrlKeyPress");
				update("metaKeyPress");
				update("shiftKeyPress");
				update("repeatPress");
				update("isComposingPress");
				update("locationPress");
				update("charUp");
				update("charCodeUp");
				update("codeUp");
				update("keyUp");
				update("keyCodeUp");
				update("whichUp");
				update("altKeyUp");
				update("ctrlKeyUp");
				update("metaKeyUp");
				update("shiftKeyUp");
				update("repeatUp");
				update("isComposingUp");
				update("locationUp");
			}
			
			function update(prop){
				document.getElementById(prop).innerHTML = "";
			}
		}
		
		function repeating(evt){
			var span = document.getElementById("repeating");
			if(evt.repeat) span.innerHTML = "(repeating)";
			else span.innerHTML = "";
		}
	</script>
	
</body>
</html>