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,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")+"</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,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")+"</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,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")+"</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>