Detect numbers or letters with jquery/javascript?

Question

I want to use an if-statement to run code only if the user types in a letter or a number.

I could use

 if(event.keyCode == 48 || event.keyCode == 49 || event.keyCode == 50..) {
       // run code
 }

Is there an easier way to do this? Maybe some keycodes don't work in all web browsers?

Answer 1

Use event.key and modern JS!

No number codes anymore. You can check key directly.

const key = event.key.toLowerCase();

if (key.length !== 1) {
    return;
}
const isLetter = (key >= "a" && key <= "z");
const isNumber = (key >= "0" && key <= "9");
if (isLetter || isNumber) {
    // Do something
}

You could also use a simple regex. ^$ ensures 1 char, i ignores case

/^[a-z0-9]$/i.test(event.key)

or individually:

const isLetter = /^[a-z]$/i.test(event.key)
const isNumber = /^[0-9]$/i.test(event.key)

Answer 2

If you want to check a range of letters you can use greater than and less than:

if (event.keyCode >= 48 && event.keyCode <= 57)
    alert("input was 0-9");
if (event.keyCode >= 65 && event.keyCode <= 90)
    alert("input was a-z");

For a more dynamic check, use a regular expression:

var inp = String.fromCharCode(event.keyCode);
if (/[a-zA-Z0-9-_ ]/.test(inp))
    alert("input was a letter, number, hyphen, underscore or space");

See the MDC documentation for the keyCode property, which explains the difference between that and the which property and which events they apply to.

Answer 3

Accept numbers or letters with javascript by Dynamic Process using regular Expression.

Add onkeypress Event for Specific Control

onkeypress="javascript:return isNumber(event)"

    function numOnly(evt) {
               evt = evt || window.event;
                var charCode = evt.which || evt.keyCode;
                var charStr = String.fromCharCode(charCode);
                if (/[0-9]/i.test(charStr)) {
                    return true;
                }
                else
                    return false;
            }

    function Alphanum(evt) {
                evt = evt || window.event;
                var charCode = evt.which || evt.keyCode;
                var charStr = String.fromCharCode(charCode);
                if (/[a-z0-9]/i.test(charStr)) {                
                    return true;
                }
                else
                    return false;
            }

Answer 4

$('#phone').on('keydown', function(e) {
     let key = e.charCode || e.keyCode || 0;

     //32 = space - border of visible and non visible characters - allows us to backspace and use arrows etc
     //127 - delete
     if (key > 32 && (key < 48 || key > 58) && key !== 127) {
         e.preventDefault();
         return false;
     }
 });

modified answer of @user4584103, allows us to remove characters, and navigate in input box and filter out every not num character

Answer 5

number validation, works fine for me

$(document).ready(function () {

        $(".TxtPhone").keypress(function (e) {

            var key = e.charCode || e.keyCode || 0;

            // only numbers
            if (key < 48 || key > 58) {

                return false;
            }

        });

});

Answer 6

First, if you're doing this, make sure it's in the keypress event, which is the only event for which you can reliably obtain information about the character the user has typed. Then I'd use the approach Andy E suggested:

document.onkeypress = function(evt) {
   evt = evt || window.event;
   var charCode = evt.which || evt.keyCode;
   var charStr = String.fromCharCode(charCode);
   if (/[a-z0-9]/i.test(charStr)) {
       alert("Letter or number typed");
   }
};

If you want to check for backspace, I'd use the keydown event instead and check for a keyCode of 8 because several browsers (including Chrome) do not fire a keypress event for the backspace key.