JSFiddle - React, Tailwind, and code Playground

by mrlew

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">

  <h1>Monitorar $.keydown()</h1>

  <p>Uma linha é adicionada a cada invocação do evento keyDown. Experimente pressionar uma tecla, ou mantê-la pressionada.</p>

  <table id="tbl" class="table table-bordered table-striped">
    <thead>
      <tr>
        <td>keyCode</td>
        <td>shiftKey?</td>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>

  <a href="#" id="btn-reset" class="btn btn-success">Limpar</a>
  
</div>

JavaScript

(function() {

  var tbody = $("#tbl > tbody");

  function addtoTable(keyCode, shiftKey) {
  
    var tds = [
      $("<td></td>", { text: keyCode }),
      $("<td></td>", { text: shiftKey })
    ];
    
    var tr = $("<tr></tr>");
    
    tr.append(tds);
    tbody.append(tr);
  }

  $(document).ready(function() {

    $(document).keydown(function(e) {
      addtoTable(e.keyCode, e.shiftKey);
    });

    $("#btn-reset").on("click", function(e) {
      tbody.empty();
    });

  });


})();