JSFiddle - React, Tailwind, and code Playground

HTML

Field 1: <input id="field1" class="letters-only" type="text" /><br />
Field 2: <input id="field2" class="letters-only" type="text" /><br />
Field 3: <input id="field3" class="letters-only" type="text" />

JavaScript

function notSpecialKey(key) {
    return (key != 9 && // Tab
    key != 13 && // Enter
    key != 16 && // Shift
    key != 17 && // Ctrl
    key != 37 && // Left Arrow
    key != 39); // Right Arrow
}

function removeNonLetters(strInput) {
    return strInput.replace(/[^A-Za-z]/g, '');
}

    document.getElementById("field1").onkeyup = function(){
            if (notSpecialKey(event.keyCode)) {
                var letters = removeNonLetters(this.value);
                this.value;
            }
    };
    document.getElementById("field1").onchange = function(){
                    alert('changed');
    };