event.keyCode tester

event-keycode-tester.markdown

event.keyCode tester

A Pen by peccu on CodePen.

License.

index.html

<input type="text" />
<table id="table">
    <tr>
      <th>Key</th>
      <th>which</th>
      <th>keyCode</th>
      <th>Shift</th>
      <th>Alt</th>
      <th>Ctrl</th>
      <th>Meta</th>
    </tr>
    <tr v-for="event in [].concat(events).reverse()">
      <td>{{event.name}}</td>
      <td>{{event.which}}</td>
      <td>{{event.keyCode}}</td>
      <td :class="{false: event.shiftKey}">{{event.shiftKey}}</td>
      <td>{{event.altKey}}</td>
      <td>{{event.ctrlKey}}</td>
      <td>{{event.metaKey}}</td>
    </tr>
  </table>

script.babel

const namedKey = {
  48: '0', 49: '1', 50: '2', 51: '3', 52: '4',
  53: '5', 54: '6', 55: '7', 56: '8', 57: '9', 
  65: 'a', 66: 'b', 67: 'c', 68: 'd', 69: 'e',
  70: 'f', 71: 'g', 72: 'h', 73: 'i', 74: 'j',
  75: 'k', 76: 'l', 77: 'm', 78: 'n', 79: 'o',
  80: 'p', 81: 'q', 82: 'r', 83: 's', 84: 't',
  85: 'u', 86: 'v', 87: 'w', 88: 'x', 89: 'y',
  90: 'z',
  16: 'Shift', 91: 'Left Command', 93: 'Right Command', 18: 'option/alt', 32: 'space',
  17: 'Control', 37: 'left', 38: 'up', 39: 'right', 40: 'down',
  13: 'Enter', 9: 'Tab', 33: 'PageUp',34: 'PageDown', 35: 'end', 36: 'home',
  8: 'BackSpace',
  189: '-', 186: ';', 187: '=', 
  219: '[', 220: '\\', 221: ']', 222: '\'',
  188: ',', 190: '.', 191: '/', 192: '`',
  229: 'IME'
};
var vue = new Vue({
  el: "#table",
  data: function() {
    return {
      events: []
    };
  },
  created: function() {
    var view = this;
    document.addEventListener("keydown", function(event) {
      console.log(event);
      event.name = namedKey[event.keyCode];
      view.events.push(event);
    });
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

style.scss

html {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFCC80;
  text-align: center;
  font-family: monospace;
  font-size: 25px;
}
table {
  height: 140%;
  line-height: 1.4;
  overflow-y: auto;
}
false {
  font-color: #ccc;
}
pre {
  text-align: left;
}