Skip to content

Instantly share code, notes, and snippets.

@peccu
Created May 30, 2018 02:50
Show Gist options
  • Save peccu/3a5f462b52a79d10d08ae42813a003ae to your computer and use it in GitHub Desktop.
Save peccu/3a5f462b52a79d10d08ae42813a003ae to your computer and use it in GitHub Desktop.
event.keyCode tester
<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>
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);
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment