Edit in JSFiddle

var text = document.getElementById("text");
var output = document.getElementById("output");

document.addEventListener("keydown",function(e){
		output.innerHTML = 'Key code: ' + e.which + '<br />' + 'Key Name: ' + e.key;
    if(e.which == 20){
    		alert("Caps lock is on, turn it off!");
    }
});
<!-- JavaScript Objects - e.which #49 -->
<p>
Welcome to the 49th Easy JavaScript tutorial, part of <a href="http://www.easyprogramming.net">EasyProgramming.net</a>. Let's do something cool and actually detect what key someone is pressing. 
</p>
<p>
Why is this useful? Let's say you're creating shortcuts for your website or even if you're creating a game, you would need to know what keys your users are pressing in order to act.
</p>
<h2>
<code>which</code> and <code>key</code>:</h2>

<p>
<code><pre>
    <span class="keyword">document</span>.addEventListener("keydown",<span class="keyword">function</span>(e){
        <span class="keyword">console</span>.log(e.which); //Returns the keycode (e.g. 16 for Shift)
        <span class="keyword">console</span>.log(e.key); //Returns the key nane (e.g. Shift)
    });
  </pre>
</code>
</p>

<p>
<h2>
Let's practice:</h2>
<input type="text" id="text" /><br />
<span id="output"></span>
<br /><br />

.keyword { 
    color: #a151d2;
}
table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}
td { 
  padding: 5px 10px;
}