jQuery Key Events Test Console

Quickly see how keyup, keydown, and keypress get triggered and what data they return in this interactive console. Note that different browsers may act in different ways, e.g., firefox triggers keypress events for arrow keys while safari and chrome do not.

HTML

<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>

<table>
  <thead>
    <tr>
      <th></th>
      <th>char:</th>
      <th>e.type:</th>
      <th class="n">e.which:</th>
      <th class="n">e.keyCode:</th>
      <th class="n">e.charCode:</th>
      <th class="last">e[modifier]:</th>
    </tr>
  </thead>
  <tbody id="events"></tbody>
</table>

CSS

body { font: normal 13px/18px helvetica,arial; padding: 0 0 0 9px; }
h1 { padding: 9px 9px 9px 0; font-size: 15px; font-weight: normal; }
.n { text-align: right; }
.d { color: #999; }
table { width: 100%; }
td, th { padding-right: 10px; }
td.last, th.last { padding-right: 0; }
/*
b { display: inline-block; margin-right: 20px; font-weight: normal; }
.time { width: 100px; }
.n { width: 70px; text-align: right; }
.w { width: 55px; }
.t { width: 55px; }
.c { width: 30px; }
.d { color: #999; }
#d { visibility: hidden; }
*/
a { color: #3681B3; }
a:hover { color: #265C80; }

JavaScript

]]]]]]][[[pp[][]][][][][][][][][][]quqqq####var $container = $('#events');

function tell(e) {
    
    // get char from code via https://stackoverflow.com/a/34711175/376489
    var keyCode = e.keyCode;
    var charCode = keyCode => 96 ? (keyCode - 48 * Math.floor(keyCode / 48)) : keyCode;
    var char = String.fromCharCode((96 <= keyCode) ? charCode: keyCode);
    
    // 
    var modifiers = ['altKey', 'ctrlKey', 'metaKey', 'shiftKey'];
    var mods_html = [];
    for (var i = 0, len = modifiers.length, mod; i < len; i++) {
      mod = modifiers[i];
      if (e[mod]) {
      	mods_html.push('<span title="e.' + mod + '">' + mod + '</span>');
      }
    }

    $container.prepend(
        '<tr>' +
        '<td class="d time">' + new Date().toLocaleTimeString() + ' &gt;</td>' +
        '<td class="c" title="keyboard character">' + (char || '&nbsp;') + '</td>' +
        '<td class="t" title="e.type">' + e.type + '</td>' +
        '<td class="n w" title="e.which">' + e.which + '</td>' +
        '<td class="n" title="e.keyCode">' + e.keyCode + '</td>' +
        '<td class="n" title="e.charCode">' + e.charCode + '</td>' +
        '<td class="last">' + mods_html.join(', ') + '</td>' +
        '</tr>'
    );
    
    // stop spacebar from scrolling
    if (e.keyCode === 32 && (e.type === 'keyup' || e.type === 'keypress')) {
      e.preventDefault();
    }
}

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

$('#d').html(new Date().toLocaleString() + ' &gt;');