JavaScript addEventListener

by hsablonniere

HTML

<span id="alt" class="modifier">ALT</span>
<span id="ctrl" class="modifier">CTRL</span>
<span id="meta" class="modifier">META</span>
<span id="shift" class="modifier">SHIFT</span>
<span id="key"></span>

CSS

body {
  font-family: Arial, sans-serif;
  font-size: 40px;
  margin: 20px;
}

#key,
.modifier {
  border: 1px solid #AAA;
  border-radius: 10px;
  margin: 5px;
  padding: 5px 10px;
}

#key:empty,
.modifier {
  display: none;
}

.selected {
  display: inline;
}

JavaScript

(function() {
    var key = document.getElementById('key');
    var alt = document.getElementById('alt');
    var ctrl = document.getElementById('ctrl');
    var meta = document.getElementById('meta');
    var shift = document.getElementById('shift');

    window.addEventListener('keydown', function(ev) {
        ev.preventDefault();
        // fromCharCode : not always what you think...
        key.innerHTML = String.fromCharCode(ev.keyCode) + ' (' + ev.keyCode + ')';

        if (ev.altKey) {
            alt.classList.add('selected');
        } else {
            alt.classList.remove('selected');
        }

        if (ev.ctrlKey) {
            ctrl.classList.add('selected');
        } else {
            ctrl.classList.remove('selected');
        }

        if (ev.shiftKey) {
            shift.classList.add('selected');
        } else {
            shift.classList.remove('selected');
        }

        // Used by macs
        if (ev.metaKey) {
            meta.classList.add('selected');
        } else {
            meta.classList.remove('selected');
        }
    }, false);
})();