JSFiddle - React, Tailwind, and code Playground

by Florian Gropp

HTML

<body>
<fieldset>
  <legend>Examples of keys that do not directly result in calls to KeyPress:</legend>
  <ul>
    <li><kbd>Shift</kbd>, <kbd>Ctrl</kbd>, <kbd>Alt</kbd></li>
    <li><kbd>F1</kbd> through <kbd>F12</kbd></li>
    <li>Arrow keys</li>
  </ul>
</fieldset>
<fieldset>
  <legend>Input</legend>
  <input type="text" />
</fieldset>
<fieldset>
  <legend>e.which</legend>
  <table>
    <tbody>
      <tr>
        <th>keydown</th>
        <td class="keydown"></td>
      </tr>
      <tr>
        <th>keypress</th>
        <td class="keypress"></td>
      </tr>
      <tr>
        <th>keyup</th>
        <td class="keyup"></td>
      </tr>
    </tbody>
  </table>
</fieldset>
</body>

CSS

th {
  text-align: right;
}

JavaScript

$(function() {
  $(document).on('keydown keyup keypress', 'input', function(e) {
    if (e.type == 'keydown') $('td').empty();
    $('.' + e.type).text(e.which)
  });
});

$(function() {
  $("#foo").keypress(function(event) {
    if (event.keyCode === 13) {
      console.log(event.ctrlKey ? "Ctrl+Enter (13)" : "Enter (13)");
    } else if (event.keyCode === 10) {
      console.log(event.ctrlKey ? "Ctrl+Enter (10)" : "Enter (10)");
    }
  });
});