I have one text box in which, user should enter only alphanumeric characters and non-text key presses should be allowed like backspace, arrow keys, etc . Also, it should also work on all major browsers (like Mozilla Firefox).

I have tried few examples which allowed to me enter only alphanumeric characters but backspace don't work with this below example in Mozilla Firefox.

$('input').bind('keypress', function (event) {
    var regex = new RegExp("^[a-zA-Z0-9]+$");
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    if (!regex.test(key)) {
       event.preventDefault();
       return false;
    }
});

I have one text box in which, user should enter only alphanumeric characters and non-text key presses should be allowed like backspace, arrow keys, etc . Also, it should also work on all major browsers (like Mozilla Firefox).

I have tried few examples which allowed to me enter only alphanumeric characters but backspace don't work with this below example in Mozilla Firefox.

$('input').bind('keypress', function (event) {
    var regex = new RegExp("^[a-zA-Z0-9]+$");
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    if (!regex.test(key)) {
       event.preventDefault();
       return false;
    }
});

• javascript
• jquery
• regex

• Note that you will need to perform similar validation on change or blur, because the user might modify the field value without using the keyboard. – nnnnnn Commented Jan 22, 2014 at 10:43

4 Answers 4

You can add [\b] to match and allow backspace.

Code:

var regex = new RegExp("^[a-zA-Z0-9\b]+$");

Demo: http://jsfiddle.net/M3bvN/

UPDATE

Instead of extend your regex you can check if the pressed key is in a list of allowed keys (arrows, home, del, canc) and if so skip the validation.

This not prevent the user to copy/paste not allowed characters. so perform the validation control in the blur event too (and always on server side).

Code:

var keyCode = event.keyCode || event.which
// Don't validate the input if below arrow, delete and backspace keys were pressed 
if (keyCode == 8 || (keyCode >= 35 && keyCode <= 40)) { // Left / Up / Right / Down Arrow, Backspace, Delete keys
    return;
}

Demo: http://jsfiddle.net/M3bvN/3/

I was working on this for a bit, and this is what I came up with:

var input = $('input[name="whatever"]');

input.bind('keypress', function(e)
{
    if ((e.which < 65 || e.which > 122) && (e.which < 48 || e.which > 57))
    {
        e.preventDefault();
    }
});

It only allows numbers and letters, both upper- and lower-case. Note that it also disallows the space bar (that's what was needed for my application).

function lettersOnly(evt) {
    evt = (evt) ? evt : event;
    var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode :
        ((evt.which) ? evt.which : 0));
    if (charCode == 8 || charCode == 46 || charCode == 37 || charCode == 39) {
        return true;
    } else if (charCode > 31 && (charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122)) {
        // alert("Enter letters only.");
        return false;
    }
    return true;
}

$('.alphanumeric').bind('keypress', function (e) {
        var specialKeys = new Array();
        specialKeys.push(8); //Backspace
        specialKeys.push(9); //Tab
        specialKeys.push(46); //Delete
        specialKeys.push(36); //Home
        specialKeys.push(35); //End
        specialKeys.push(37); //Left
        specialKeys.push(39); //Right
        var keyCode = e.keyCode == 0 ? e.charCode : e.keyCode;
        var ret = ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122) || (specialKeys.indexOf(e.keyCode) != -1 && e.charCode != e.keyCode));
        return ret;
    });

This code will Firefox also