Edit in JSFiddle

var $container = $('#events');

function tell(evt) {
    $container.prepend(
        '<p>' +
        '<b class="d">' + new Date().toLocaleString() + ' &gt;</b>' +
        '<b class="t" title="evt.type">' + evt.type + '</b>' +
        '<b class="n" title="evt.which">' + evt.which + '</b>' +
        '<b class="n" title="evt.keyCode">' + evt.keyCode + '</b>' +
        '<b class="n" title="evt.charCode">' + evt.charCode + '</b>' +
        (evt.altKey ? '<b title="evt.altKey">alt</b>' : '') +
        (evt.metaKey ? '<b title="evt.metaKey">meta</b>' : '') +
        (evt.shiftKey ? '<b title="evt.shiftKey">shift</b>' : '') +
        '</p>'
    );
}

$(document).bind('keydown keypress keyup', tell);

$('#d').html(new Date().toLocaleString() + ' &gt;');
<h1>Click here and start typing to see how keyboard events are triggered. Hover over a field to see the event property. (via <a href="http://mrcoles.com/keys/">mrcoles.com</a>)</h1>
<div><b class="d" id="d">date:</b><b class="t">evt:</b><b class="n">which:</b><b class="n">keyCode:</b><b class="n">charCode:</b><b>modifier:</b></div>
<div id="events"></div>
body { font: normal 13px/18px helvetica,arial; padding: 0 0 0 9px; }
h1 { padding: 9px 9px 9px 0; font-size: 15px; font-weight: normal; }
b { display: inline-block; margin-right: 20px; font-weight: normal; }
.n { width: 46px; text-align: right; }
.t { width: 50px; }
.d { color: #999; }
#d { visibility: hidden; }
a { color: #3681B3; }
a:hover { color: #265C80; }