Only Allow English Characters And Numbers For Text Input

November 15, 2024 Post a Comment

Live Demo: http://jsfiddle.net/thisizmonster/DveuB/ How can I change this so that the input only allows the characters A-Z, a-z, 0-9 while typing, without using a regular expressio

Solution 1:

Assuming you also want to accept spaces:

$("#user").keypress(function(event){
    var ew = event.which;
    if(ew == 32)
        returntrue;
    if(48 <= ew && ew <= 57)
        returntrue;
    if(65 <= ew && ew <= 90)
        returntrue;
    if(97 <= ew && ew <= 122)
        returntrue;
    returnfalse;
});

If you don't want to accept spaces then remove the if(ew == 32) return true;

JSFiddle

Solution 2:

<inputtype="text"id="firstName"onkeypress="return (event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode >= 48 && event.charCode <= 57)" />

The ASCII Character Set : https://www.w3schools.com/charsets/ref_html_ascii.asp

Solution 3:

All other answers are fine but don't prevent copy and paste non-English characters.

‌Bellow code works for both (key press and copy-paste):

<inputtype="text" name="text" oninput="this.value=this.value.replace(/[^A-Za-z\s]/g,'');">

Solution 4:

You can do something like this: http://jsfiddle.net/DveuB/1/

Then it's only 0-9, a-z and A-Z

$(function(){
    $("#user").keypress(function(event){
        if ((event.charCode >= 48 && event.charCode <= 57) || // 0-9
            (event.charCode >= 65 && event.charCode <= 90) || // A-Z
            (event.charCode >= 97 && event.charCode <= 122))  // a-z
            alert("0-9, a-z or A-Z");
    });
});

Update:http://jsfiddle.net/DveuB/4/ To prevent what @mu is talking about:

$("#user").keyup(function(event){
    if (event.altKey == false && event.ctrlKey == false)
        if ((event.keyCode >= 48 && event.keyCode <= 57 && event.shiftKey== false) ||
            (event.keyCode >= 65 && event.keyCode <= 90) ||
            (event.keyCode >= 97 && event.keyCode <= 122))
            alert("0-9, a-z or A-Z");
});

Solution 5:

<html><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>
$(document).ready(function () {

  $('.clsAlphaNoOnly').keypress(function (e) {  // Accept only alpha numerics, no special characters var regex = newRegExp("^[a-zA-Z0-9 ]+$");
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
            returntrue;
        }

        e.preventDefault();
        returnfalse;
    }); 
})
</script><body><inputclass='clsAlphaNoOnly'type='text'></body></html>

JavaScript Guy