keypress:feedback

by kdrdgn

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

JavaScript

$(function(){
$('body').on('keyup', function(e){
    if($('#key-demo').length == 0){ $('body').append('<div id="key-demo" style="font-size: 80px;border: 5px solid #333; background-color: #FFDC00;padding: 30px;color: #333; position: fixed;bottom: 30px;right: 30px; font-weight: bold; z-index: 9999;"/>'); }
    var key = e.which;
    var keymap = {
      '13': '↩',
      '9': '⇥',
      '27': 'ESC',
      '37': '⇦',
      '38': '⇧',
      '39': '⇨',
      '40': '⇩',
      'S9': '⇧ + ⇥'
    };
      $('#key-demo').html( keymap[(e.shiftKey ? 'S': '') + e.which] ).fadeIn(750, function(){
        $('#key-demo').fadeOut();
      });
    //console.log('body keyup', key, e);
  });
});