JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<p>Name Characters: <input type="text" id="NameCharacters" onkeypress="return inputLimiter(event,'NameCharacters')" value="" /></p>
    <p>Letters Only: <input type="text" id="LettersOnly" onkeypress="return inputLimiter(event,'Letters')" value="" /></p>
    <p>Numbers Only: <input type="text" id="NumbersOnly" onkeypress="return inputLimiter(event,'Numbers')" value="" /></p>
    <p>Letters, Numbers, Hyphens, and Spaces: <input type="text" id="NameCharactersAndNumbers" onkeypress="return inputLimiter(event,'NameCharactersAndNumbers')" value="" /></p>

JavaScript

function inputLimiter(e,allow) {
    var AllowableCharacters = '';

    if (allow == 'Letters'){AllowableCharacters=' ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';}
    if (allow == 'Numbers'){AllowableCharacters='1234567890';}
    if (allow == 'NameCharacters'){AllowableCharacters=' ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-.\'';}
    if (allow == 'NameCharactersAndNumbers'){AllowableCharacters='1234567890 ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-\'';}

    var k = document.all?parseInt(e.keyCode): parseInt(e.which);
    if (k!=13 && k!=8 && k!=0){
        if ((e.ctrlKey==false) && (e.altKey==false)) {
        return (AllowableCharacters.indexOf(String.fromCharCode(k))!=-1);
        } else {
        return true;
        }
    } else {
        return true;
    }
}