Testing keyCode and charCode

HTML

<input id="foo" placeholder="type in me" />

<div id="keydownresult" data-result-type="keydown" class="result"></div>
<div id="keyupresult" data-result-type="keyup" class="result"></div>
<div id="keypressresult" data-result-type="keypress" class="result"></div>

<div id="key" class="result">
    The results shown are:<br />
    jQuery keyCode<br />
    jQuery charCode<br />
    browser keyCode<br />
    browser charCode
</div>

CSS

input {
    margin: 1em;
}
#keydownresult {
    border-top: 1px solid black; margin-top: 1em;
}
.result {
    font-family: verdana; font-size: 8pt;
    border-bottom: 1px solid black;
    padding: 1em;
    position: relative;
}
.result:before {
    content: attr(data-result-type);
    position: absolute;
    top: 0.1em;
    right: 1em;
}

JavaScript

var keydownresult = document.getElementById('keydownresult');

jQuery('#foo').bind('keydown', function(e) {
    var data = [e.keyCode, e.charCode, e.originalEvent.keyCode, e.originalEvent.charCode];
    if(window.console) console.log(data);
    keydownresult.innerHTML = data.join('<br />');
});

var keyupresult = document.getElementById('keyupresult');

jQuery('#foo').bind('keyup', function(e) {
    var data = [e.keyCode, e.charCode, e.originalEvent.keyCode, e.originalEvent.charCode];
    if(window.console) console.log(data);
    keyupresult.innerHTML = data.join('<br />');
});

var keypressresult= document.getElementById('keypressresult');

jQuery('#foo').bind('keypress', function(e) {
    var data = [e.keyCode, e.charCode, e.originalEvent.keyCode, e.originalEvent.charCode];
    if(window.console) console.log(data);
    keypressresult.innerHTML = data.join('<br />');
});