KbdEventMonitor

by Naeel Maqsudov

HTML

<table>
    <tr>
        <th class="keydown">KeyDown</th>
        <th class="keyup">KeyUp</th>
        <th class="keypress">KeyPress</th>
    </tr>
    <tr>
        <td class="keydown"></td>
        <td class="keyup"></td>
        <td class="keypress"></td>
    </tr>
</table>

CSS

td,th{
    border:1px solid #000;
    width: 100px;
    height: 20px;
}
.true {color:red}

JavaScript

function handler(e){
  //console.log(e.type,e.shiftKey,e.altKey,e.ctrlKey,e.keyCode,e.charCode);
  var cells = document.getElementsByClassName(e.type);
  cells[0].style.color = '#F00'
  setTimeout(function(){cells[0].style.color = '#000'},300);
  cells[1].innerHTML = 
      '<span class="' + e.altKey + '">A</span>' +
      '<span class="' + e.ctrlKey + '">C</span>' +
      '<span class="' + e.shiftKey + '">S</span>|' +
      e.keyCode + '|' +
      e.charCode + '(&#' + e.charCode + ';)'
}

document.onkeydown = handler;
document.onkeyup = handler;
document.onkeypress = handler;