Best way to restrict a text field to numbers only?

Question

I\'m using the following Javascript to restrict a text field on my website to only accept numerical input, and no other letters or characters. The problem is, it REALLY reje

Answer 1

In order to block anything but numbers from being input into a text field but still allowing for other buttons to work (such as delete, shift, tab, etc.) look at a reference of the Javascript key codes; anything from 65 on up (to 222) can be blocked.

Using Jquery and Javascript, that would look like:

$('#textFieldId').keydown(function(event) {
    if ( event.keyCode > 64 ) {
        event.preventDefault();
    }
});

The key codes will be the same in Javascript whether or not Jquery is used.

Answer 2

My functions:

$('.input_integer_only').on('input', function(e) {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
});


$('.input_float_only').on('input', function(e) {
    var $var = $(this).val().replace(/[^0-9\.]/g, '');
    var $aVar = $var.split('.');

    if($aVar.length > 2) {
        $var = $aVar[0] + '.' + $aVar[1];
    }

    $(this).val($var);
});

Answer 3

You can handle te event on html by introducing keypresshandler function

function keypresshandler(event)
{
     var charCode = event.keyCode;

     //You condition
     if (charCode == 58 ){

        event.preventDefault();

        return false;
     }        
} 

Answer 4

This is something I made another time for just numbers, it will allow all the formatters as well.

jQuery

$('input').keypress(function(e) {
    var a = [];
    var k = e.which;

    for (i = 48; i < 58; i++)
        a.push(i);

    if (!(a.indexOf(k)>=0))
        e.preventDefault();
});​

Try it

http://jsfiddle.net/zpg8k/

As a note, you'll want to filter on submit/server side as well, for sake of pasting/context menu and browsers that don't support the paste event.

Edit to elaborate on multiple methods

I see you're bouncing around the 'accepted' answer, so I'll clear something up. You can really use any of the methods listed here, they all work. What I'd personally do is use mine for live client side filtering, and then on submit and server side use RegEx as suggested by others. However, no client side by itself will be 100% effective as there is nothing stopping me from putting document.getElementById('theInput').value = 'Hey, letters.'; in the console and bypassing any clientside verification (except for polling, but I could just cancel the setInterval from the console as well). Use whichever client side solution you like, but be sure you implement something on submit and server side as well.

Edit 2 - @Tim Down

Alright, per the comments I had to adjust two things I didn't think of. First, keypress instead of keydown, which has been updated, but the lack of indexOf in IE (seriously Microsoft!?) breaks the example above as well. Here's an alternative

$('input').keypress(function(e) {
    var a = [];
    var k = e.which;

    for (i = 48; i < 58; i++)
        a.push(i);

    if (!($.inArray(k,a)>=0))
        e.preventDefault();
});​

New jsfiddle: http://jsfiddle.net/umNuB/

Answer 5

All of the answers are outdated, lengthy and will cause annoyance to your users. Most of them don’t even filter or allow pasted content.

Instead of filtering the input, do some validation before submitting the form and then also server-side.

HTML has validation included:

<input type="number" pattern="[0-9]+">

This also enables the number keyboard on mobile.

Answer 6

Here is my solution: a combination of the working ones below.

var checkInput = function(e) {
        if (!e) {
            e = window.event;
        }

        var code = e.keyCode || e.which;

        if (!e.ctrlKey) {

            //46, 8, 9, 27, 13 = backspace, delete, tab, escape, and enter
            if (code == 8 || code == 13 || code == 9 || code == 27 || code == 46)
                return true;
            //35..39 - home, end, left, right
            if (code >= 35 && code <= 39)
                return true;
            //numpad numbers
            if (code >= 96 && code <= 105)
                return true;
            //keyboard numbers
            if (isNaN(parseInt(String.fromCharCode(code), 10))) {
                e.preventDefault();
                return false;
            }
        }
        return true;
    };