How to allow only numeric (0-9) in html inputbox using jQuery?

Question

I am creating a web page where I have a input text field in which I want to allow only numeric characters like (0,1,2,3,4,5...9) 0-9.

How can i make it using jquery??

Thanks

Answer 1

Check regular-expression-matching-in-jquery

Answer 2

Have a look at this plug-in. This is another one.

This is a link if you want to build it yourself.

Answer 3

$(document).ready(function() {
    $("#txtboxToFilter").keydown(function(event) {
     // Allow only backspace and delete
     if ( event.keyCode == 46 || event.keyCode == 8 ) {
      // let it happen, don't do anything
     }
     else {
      // Ensure that it is a number and stop the keypress
      if (event.keyCode < 48 || event.keyCode > 57 ) {
       event.preventDefault(); 
      } 
     }
    });
});

Source: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values

Answer 4

You can use this Javascript function:

function maskInput() {
     var key_code = window.event.keyCode;
     var oElement = window.event.srcElement;
     if (!window.event.shiftKey && !window.event.ctrlKey && !window.event.altKey) {
      if ((key_code > 47 && key_code < 58) ||
         (key_code > 95 && key_code < 106)) {
        if (key_code > 95) 
         key_code -= (95-47);
          oElement.value = oElement.value;
      } else if(key_code == 8) {
       oElement.value = oElement.value;
      } else if(key_code != 9) {
       event.returnValue = false;
      }    
     }
    }

And you can bind it to your textbox like this:

$(document).ready(function() {
    $('#myTextbox').keydown(maskInput);
});

I use the above in production and it works perfectly, and is cross-browser. Furthermore, it does not depend on jQuery, so you can bind it to your textbox with inline Javascript:

<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>

Answer 5

Keep in mind that you cannot rely on client-side validation - you also need to validate on the server in case the user has JS turned off, or isn't using a JS compatible browser.

Answer 6

Also, keep in mind that the user can bypass any key press validation by right clicking the textbox and pasting in whatever they want from the clipboard.

Answer 7

Need to make sure you have the numeric keypad and the tab key working too

 // Allow only backspace and delete
            if (event.keyCode == 46 || event.keyCode == 8  || event.keyCode == 9) {
                // let it happen, don't do anything
            }
            else {
                // Ensure that it is a number and stop the keypress
                if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {

                }
                else {
                    event.preventDefault();
                }
            }

Answer 8

You could just use a simple JS regex to test for purely numeric characters:

/^[0-9]+$/.test(input);

This returns true if the input is numeric or false if not

Answer 9

To elaborate a little more on answer #3 I'd do the following (NOTE: still does not support paste oprations through keyboard or mouse):

$('#txtNumeric').keypress(
            function(event) {
                //Allow only backspace and delete
                if (event.keyCode != 46 && event.keyCode != 8) {
                    if (!parseInt(String.fromCharCode(event.which))) {
                        event.preventDefault();
                    }
                }
            }
        );

Answer 10

Here is the function I use:

// Numeric only control handler
jQuery.fn.ForceNumericOnly =
function()
{
    return this.each(function()
    {
        $(this).keydown(function(e)
        {
            var key = e.charCode || e.keyCode || 0;
            // allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
            return (
                key == 8 || 
                key == 9 ||
                key == 46 ||
                (key >= 37 && key <= 40) ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
        })
    })
};

You can then attach it to your control by doing:

$("#yourTextBoxName").ForceNumericOnly();

Answer 11

Not using JQuery but simple and just using one javascript function
Use javascript function isNaN

if (isNaN($('#inputid').val()))

@GalacticCowboy
Here is the edited sample to don't include any jquery:

if (isNaN(document.getElementById('inputid').val()))

Answer 12

Hey, me too!

function suppressNonNumericInput(event){

    if( !(event.keyCode == 8                                // backspace
        || event.keyCode == 46                              // delete
        || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
        || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
        || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
        ) {
            event.preventDefault();     // Prevent character input
    }
}

Answer 13

you could also use this JQuery plugin Jquery alphaNumeric,i found it to be really great.check it here http://www.itgroup.com.ph/alphanumeric/