JSFiddle - React, Tailwind, and code Playground

by Carlos Delgado

HTML

<input type="text" id="text"/><br>
<span id="status"></span>

JavaScript

function isCapsLock(e){

    e = (e) ? e : window.event;

    var charCode = false;
    if (e.which) {
        charCode = e.which;
    } else if (e.keyCode) {
        charCode = e.keyCode;
    }

    var shifton = false;
    if (e.shiftKey) {
        shifton = e.shiftKey;
    } else if (e.modifiers) {
        shifton = !!(e.modifiers & 4);
    }

    if (charCode >= 97 && charCode <= 122 && shifton) {
        return true;
    }

    if (charCode >= 65 && charCode <= 90 && !shifton) {
        return true;
    }

    return false;

}

document.getElementById("text").addEventListener("keypress",function(e){
	var spn = document.getElementById("status");
	if(isCapsLock(e)){
  	 spn.innerHTML = "CapsLocks enabled";
  	 spn.style.color = "red";
  }else{
  	spn.innerHTML = "CapsLocks disabled";
  	 spn.style.color = "blue";
  }
},false);