event.key log tool

HTML

<textarea id="text"></textarea>
<p>
Click the below box to focus it. It will absorb all of your keypresses.
</p>
<div id="focusbox">Not focused</div>

CSS

#text{
    display:inline-block;
    padding:10px;
    height:200px;
}

#focusbox{
    display:inlune-block;
    float:left;
    padding:10px;
    border: 1px solid #f00;
    background: #111;
    color: #eee;
    font-weight: bold;
    outline: none;
    cursor: pointer;
    -webkit-user-select: none; // I hate vendor prefixes;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#focusbox:focus{
    border: 1px solid #0f0;
    background: #eee;
    color:#111;
}

JavaScript

var text = document.querySelector("textarea#text"),
    focusbox = document.querySelector("div#focusbox");

function log(msg){
    text.value += "[" + msg + "]\n";
    text.scrollTop += 100;
}

function keyListener(event){
    log(event.key);
    return false;
}

function focusChange(event){
    var output = "Not focused";
    
    if(event.type == "focus"){
        output = "Focused";
    }
    
	focusbox.innerHTML = output;
}

focusbox.onkeydown = keyListener; 
/* For some reason, I have to use this method instead of addEventListener
 * Otherwise, the default actions for ContextMenu, Alt, and F5, will be carried out, ignoring the return.
 * I seem to have discovered a bug in Firefox's JS/DOM environment.
 */
focusbox.addEventListener("focus", focusChange);
focusbox.addEventListener("blur", focusChange);
focusbox.tabIndex = 0;