Skip to content

Instantly share code, notes, and snippets.

@bboyle

bboyle/key-events.html

Created February 14, 2012 02:23
Show Gist options
  • Save bboyle/1822619 to your computer and use it in GitHub Desktop.
Save bboyle/1822619 to your computer and use it in GitHub Desktop.
Download ZIP
Finding javascript key codes aka "which" value — http://codepen.io/bboyle/pen/KwbRyQ
Raw
key-events.html
<!DOCTYPE html>
<html>
<head>
<title>key events</title>
<style>
body {
color: #111;
background: #f7f7f7;
font: 100%/1.3 Verdana, sans-serif;
padding: 3em;
}
table {
border-collapse: collapse;
}
caption {
text-align: left;
font-weight: bold;
}
th, td {
padding: .3em 1.5em;
}
th {
font-weight: normal;
border-bottom: 1px solid #333;
}
th:first-child, td:first-child {
padding-left: 0;
}
tr:nth-child(even) > td {
background: rgba(0, 0, 0, .05);
}
tr:last-child > td {
border-bottom: 1px solid #333;
}
.false {
color: rgba(17, 17, 17, .25);
}
</style>
</head>
<body>
<table>
<caption>Key events log</caption>
<thead>
<tr>
<th>#</th>
<th>Event</th>
<th>Which</th>
<th>Ctrl</th>
<th>Alt</th>
<th>Shift</th>
<th>Meta</th>
<th>Timestamp</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var tbody = $( 'tbody' ),
i = 0;
$( document ).on( 'keydown keyup keypress', function( event ) {
var data = [ ++i, event.type, event.which, event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, new Date()];
tbody.prepend( '<tr>' + $.map( data, function( value ) {
return '<td' + ( value === false ? ' class="false"' : '' ) + '>' + String( value ) + '</td>';
}) + '</tr>' );
event.preventDefault();
return false;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment