JSFiddle - React, Tailwind, and code Playground

by Mohd Zaki

HTML

<input id="firstname" placeholder="first name" onkeyup="lettersOnly(this)">
<input id="lastname" placeholder="last name" class="lettersOnly">

<input type="text" onKeyDown="myFunction()" value="" />

<input type="text" pattern="[^a-zA-Z]+">
<script>
function lettersOnly(input){
	var regex = /[^a-z]/gi;
    input.value = input.value.replace(regex, "");
}
</script>

JavaScript

function lettersOnlys(input) {
    var regex = /[^a-z]/gi;
    input.value = input.value.replace(regex, "");
}

function myFunction() {
    var e = event || window.event;  // get event object
    var key = e.keyCode || e.which; // get key cross-browser

    if (key < 48 || key > 57) { //if it is not a number ascii code
        //Prevent default action, which is inserting character
        if (e.preventDefault) e.preventDefault(); //normal browsers
            e.returnValue = false; //IE
    }
}