JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<textarea id="textareaID">
</textarea>

JavaScript

document.getElementById('textareaID').onkeydown=keydown;
document.getElementById('textareaID').onkeyup=keyup;

// keydown is run more than once if held dow
function keydown (event) {
    // if we are putting in a letter
    if ((event.keyCode <=  13 && event.keyCode >= 9) ||
                (event.keyCode <=  90 && event.keyCode >= 47) ||
                (event.keyCode <= 111 && event.keyCode >= 96) ||
                (event.keyCode <= 222 && event.keyCode >= 186)) {
        // prevent letters from being put into the textarea
        event.preventDefault()
    }
}
// since the keyup event is only fired once we will do most of the work here
function keyup (event) {
   // save the value of the textarea for later
   var val = document.getElementById('textareaID').value;
   
   // if we are putting in a letter
   if ((event.keyCode <=  13 && event.keyCode >= 9) ||
                (event.keyCode <=  90 && event.keyCode >= 47) ||
                (event.keyCode <= 111 && event.keyCode >= 96) ||
                (event.keyCode <= 222 && event.keyCode >= 186)) {
                    
       // if the shift key is being held down put in val + the new capital letter
       if (event.shiftKey) {
           document.getElementById('textareaID').value = val + String.fromCharCode(event.keyCode);
       } else {
           // if the shift key is being held down put in val + the new lowercase letter
           document.getElementById('textareaID').value = val + String.fromCharCode(event.keyCode).toLowerCase();
       }
    }
    
}