押したキーの情報を調べる

<div class="kc">
  <div class="kc__big" id="key">?</div>
  <table class="kc__table">
    <tr><th>e.key（押された文字）</th><td id="k-key">-</td></tr>
    <tr><th>e.code（キーの位置）</th><td id="k-code">-</td></tr>
    <tr><th>e.keyCode（キー番号・古い書き方）</th><td id="k-keycode">-</td></tr>
    <tr><th>Shift</th><td id="k-shift">-</td></tr>
    <tr><th>Ctrl</th><td id="k-ctrl">-</td></tr>
    <tr><th>Alt</th><td id="k-alt">-</td></tr>
  </table>
</div>

(function() {
    // 表示する場所を先に探しておく
    var big     = document.getElementById('key');
    var keyEl   = document.getElementById('k-key');
    var codeEl  = document.getElementById('k-code');
    var numEl   = document.getElementById('k-keycode');
    var shiftEl = document.getElementById('k-shift');
    var ctrlEl  = document.getElementById('k-ctrl');
    var altEl   = document.getElementById('k-alt');

    // キーが押されたときに呼ばれる関数
    function keyDownFunc(e) {
        big.textContent     = e.key === ' ' ? 'Space' : e.key;
        keyEl.textContent   = e.key;
        codeEl.textContent  = e.code;
        numEl.textContent   = e.keyCode;
        shiftEl.textContent = e.shiftKey;   // true / false
        ctrlEl.textContent  = e.ctrlKey;
        altEl.textContent   = e.altKey;
    }

    // ページ全体で「キーが押された」を受け取る
    document.addEventListener('keydown', keyDownFunc);
})();