event.key

by denvdmj

HTML

<input />
keydown: <output id="output-keydown"></output>
keyup: <output id="output-keyup"></output>
keypress: <output id="output-keypress"></output>

CSS

:root {
  font: 16px/1.5 "Arial", sans-serif;
  font-stretch: ultra-condensed;
  text-align: left;
  cursor: default;
  background: #fff;
  color: #000;
}
body {
  margin: 0 auto;
  padding: 1em 2em 4em 2em;
  min-width: 20rem;
  max-width: 40rem;
}

input, output { 
  display: block;
  padding: .1em;
  margin: 0;
  border: 1px solid #aaa;
}
output {
  white-space: pre;
  font: 14px/1.5 Condensed-Coding, monospace;
}

@font-face {
  font-family: 'Condensed-Coding';
  font-style: normal;
  font-weight: 400;
  src: url(https://cdn.rawgit.com/frantisek-sodomka-gomorrka/fonts/3063e30b/condensed-coding.r-webfont.woff2?raw=true) format('woff2'),
  url(https://cdn.rawgit.com/frantisek-sodomka-gomorrka/fonts/3063e30b/condensed-coding.r-webfont.woff?raw=true) format('woff');
}

JavaScript

var input = document.querySelector('input');

function updateOutput (type, event) {
  window['output-'+type].textContent = JSON.stringify({
    key			 : event.key,
    keyCode  : event.keyCode,
    charCode : event.charCode,    
    ctrlKey  : event.ctrlKey,
    altKey   : event.altKey,
    shiftKey : event.shiftKey
  }, null, 4);
}

input.onkeydown = 
input.onkeyup = 
input.onkeypress =
function(event) {
	input.value = event.key;
  updateOutput(event.type, event);
  //event.preventDefault();
}