Allowing just Numeric Text on Input Text field

Question

I was using Jquery Numeric plugin but I found that is not working on FireFox 3.6 on Osx (does not allow pasting).

I'm searching a Jquery plugin or Javascript snippet that allows just Numeric Text on an Input Text field.
I have the following requirements:

Should allow just numeric text
Should NOT allow punctuation (.,)
Should NOT allow dashed text (-)
Should allow pasting just for numeric text
Multibrowser
Multiplatform

you may find this usefull http://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery — Luca Filosofi, May 25 '10 at 10:45
How about http://stackoverflow.com/questions/2980038/allow-text-box-only-for-alphabets-using-jquery/2980052#2980052 with changing `a-z` to `0-9`? — dev-null-dweller, Jun 06 '10 at 21:27

Luca Filosofi · Answer 1 · 2015-09-18T07:52:48.437

7

DEMO: http://so.devilmaycode.it/allowing-just-numeric-text-on-input-text-field/

jQuery.fn.onlyDigits = function() {
    var k;
    // little trick just in case you want use this:
    $('<span></span>').insertAfter(this);
    var $dText = $(this).next('span').hide();
    // Really cross-browser key event handler
    function Key(e) {
        if (!e.which && ((e.charCode ||
        e.charCode === 0) ? e.charCode: e.keyCode)) {
        e.which = e.charCode || e.keyCode;
        } return e.which; }
    return $(this).each(function() {
        $(this).keydown(function(e) {
            k = Key(e);
            return (
            // Allow CTRL+V , backspace, tab, delete, arrows,
            // numbers and keypad numbers ONLY
            ( k == 86 && e.ctrlKey ) || (k == 86 && e.metaKey) || k == 8 || k == 9 || k == 46 || (k >= 37 && k <= 40 && k !== 32 ) || (k >= 48 && k <= 57) || (k >= 96 && k <= 105));
        }).keyup(function(e) {
            var value = this.value.replace(/\s+/,'-');
            // Check if pasted content is Number
            if (isNaN(value)) {
                // re-add stored digits if CTRL+V have non digits chars
                $(this).val($dText.text());
            } else { // store digits only of easy access
                $dText.empty().append(value);
            }
        });
    });
};

USAGE:

$("#onlydigits").onlyDigits();

NOTE:

thanks to Insider for pointing out the past (cmd+v) for MAC

key event handler REFERENCES:

edited Sep 18 '15 at 07:52

answered May 25 '10 at 12:01

Luca Filosofi

30,905
9
70
77

i can't test it bro! i don't have a MAC and I'll never have one! ;-) can you tell me what exactly doesn't work!? grazie! ;-) – Luca Filosofi May 25 '10 at 19:53
It does not allow pasting.Grazie a te :). – systempuntoout May 26 '10 at 08:15
ok, updated one more time, now it use `e.ctrlKey` instead of `key code 17`, not sure, but it should work as expected! let me know! – Luca Filosofi May 26 '10 at 09:09
hey bro, no problem, at this point, i want make it to work, but i need a little help! can you alert() the k var and see what number it give to you!? – Luca Filosofi May 26 '10 at 21:37
I see 224.Sorry for the delay but i was in vacation. – systempuntoout Jun 05 '10 at 21:25
hey bro! try this new fix and let me know! – Luca Filosofi Jun 06 '10 at 21:25
jQuery normalizes `event.which` -- so your `Key` function is not necessary: http://api.jquery.com/event.which/ – James Jun 06 '10 at 21:34
@J-P: have you tested it in all browser personally!? – Luca Filosofi Jun 06 '10 at 22:02
To make it work on Mac OS (paste with Cmd+v), just replace (k == 224 && e.metaKey) with (k == 86 && e.metaKey). Looks like author's typo :) – Insider Jul 26 '15 at 17:43

score 5 · Accepted Answer · answered Jun 24 '10 at 21:03

5

Thanks to dev-null-dweller i have resolved with this script:

jQuery('#input').bind('keyup blur',function(){ 
   jQuery(this).val( jQuery(this).val().replace(/[^0-9]/g,'') ); }
);

answered Jun 24 '10 at 21:03

systempuntoout

71,966
47
171
241

1

Came here to share almost the same thing; except that I used "\d" instead of [0-9]. :P – WhyNotHugo Jul 26 '12 at 16:23

score 0 · Answer 3 · answered Mar 25 '13 at 13:40

0

Thanks systempuntoout.. I've fixed this with following script

$('#input').keyup( function() {
  var $this = $(this);
  $this.val($this.val().replace(/[^\d.]/g, ''));     
});

answered Mar 25 '13 at 13:40

Rohit Siddha

449
6
8

Allowing just Numeric Text on Input Text field

3 Answers3

Linked