key events playground

click into input/textarea and press buttons, see event codes

HTML

<input class="inline-editor" type="text" placeholder="input" />
<textarea class="multiline-editor" placeholder="textarea"></textarea>
<table class="summary">
  <tbody>
    <tr>
      <th>Latest values of</th>
      <th><code>keyCode</code></th>
      <th><code>which</code></th>
      <th><code>key</code></th>
      <th><code>code</code></th>
      <th><code>target.value</code></th>
    </tr>
    <tr id="down"> <th>down</th> <td></td><td></td><td></td><td></td><td></td></tr>
    <tr id="press"><th>press</th><td></td><td></td><td></td><td></td><td></td></tr>
    <tr id="up">   <th>up</th>   <td></td><td></td><td></td><td></td><td></td></tr>
  </tbody>
</table>
<div class="clean"><button class="clean__button">clean</button></div>

CSS

.inline-editor,
.multiline-editor {
  box-sizing: border-box;
  width: 100%;
}
th, td {
  padding: 0.2em 0.4em;
}
.clean {
  padding: .5em;
  text-align: center;
}

JavaScript

function summarizeCodes(event) {
  const type = event.type.replace('key', '')
  const value = event.target.value
  const summaryRow = document.getElementById(type)
  summaryRow.children[1].innerHTML = event.keyCode
  summaryRow.children[2].innerHTML = event.which
  summaryRow.children[3].innerHTML = event.key
  summaryRow.children[4].innerHTML = event.originalEvent.code
  summaryRow.children[5].innerHTML = value
}

jQuery('.inline-editor, .multiline-editor')
  .on('keydown keyup keypress', summarizeCodes);

jQuery('.clean__button').on('click',() => jQuery('td').empty())