jquery - Numeric Only Text Field

Question

I found this very short clean code to only allow numeric chars in a text field. Currently it only covers numbers 0-9 and backspace and delete. I wanted it to also include decimal/period, so I have been fighting with this to simply include keycode 110 and/or 190. I can not get it to work. Can anyone see what I am doing wrong?

$(document).ready(function() {
    $('input.numberinput').bind('keypress', function(e) { 
return ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57) ) || (e.which!=110) ? false : true ;
  });
  });

jsfiddle here: http://jsfiddle.net/justmelat/EN8pT/

html

         <div class="label">Enter a number:</div>
        <input type="text" name="txtNumber1" id="txtNumber1" value=""  class="numberinput" />

         <div class="label">Enter a number:</div>
        <input type="text" name="txtNumber2" id="txtNumber2" value="" class="numberinput" />
    </div>

@Andrew Because it's an HTML5 element, therefore not supported in older browsers (namely IE8 and below, not sure about IE9). — Bojangles, Jul 13 '12 at 15:30
@JamWaffles I know that, I only asked because a browser was never specified. — ayyp, Jul 13 '12 at 15:31
Possible duplicate of [How to allow only numeric (0-9) in HTML inputbox using jQuery?](https://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery) — emkey08, Jul 18 '19 at 08:15

Daniel Li · Accepted Answer · 2013-01-09T01:37:51.083

6

Try:

$(document).ready(function () {
    $('input.numberinput').bind('keypress', function (e) {
        return !(e.which != 8 && e.which != 0 &&
                (e.which < 48 || e.which > 57) && e.which != 46);
    });
});

JsFiddle: http://jsfiddle.net/EN8pT/1/

edited Jan 09 '13 at 01:37

answered Jul 13 '12 at 15:28

Daniel Li

14,976
6
43
60

Hi Hope, no dice on this one. The period/decimal just will not work. I created a jsfiddle here: `http://jsfiddle.net/justmelat/EN8pT/` – user1176783 Jul 13 '12 at 15:44
Just ran into something similar at work - make sure to check for control/meta keys so you can still copy and paste! – cloudfeet Sep 24 '13 at 14:50
@DanielLi - The above works to allow only numbers in the textbox. How to allow the enter key so that user can enter a number and hit enter to submit a form? – Purni Jan 16 '14 at 05:50

score 1 · Answer 2 · answered Jul 12 '13 at 05:02

1

With the above answer you can still do 0.23.12.33 which is not a valid number.

http://www.texotela.co.uk/code/jquery/numeric/ is a great little lightweight plugin that I have used a lot. It takes the pain out of the above.

answered Jul 12 '13 at 05:02

Peter Munnings

3,309
1
30
43

score 0 · Answer 3 · answered Sep 24 '13 at 14:13

$("#input").keydown(function(event) {
 var theEvent = event || window.event;
 var key = theEvent.keyCode || theEvent.which;
    // Allow: backspace, delete, tab, escape, and enter
    if ( key == 46 || key == 8 || key == 9 || key == 27 || key == 13 ||  key == 110 || key == 190 ||
         // Allow: Ctrl+A
        (key == 65 && theEvent.ctrlKey === true) || 
         // Allow: home, end, left, right
        (key >= 35 && key <= 39)) {
             // let it happen, don't do anything
             return;
    }
    else {
        // Ensure that it is a number and stop the keypress
        if (theEvent.shiftKey || (key < 48 || key > 57) && (key < 96 || key > 105 )) {
            theEvent.preventDefault(); 
        }  

    }
});

with keycode 110 and 190

jquery - Numeric Only Text Field

3 Answers3