How to valid Numeric values onkeypress

Question

I have this simple HTML document

<input type="text"  id="my_text" onkeypress="valid_numbers(event);" size="30"/>
<script type="javascript">
function valid_numbers(e)
{
        var key=e.which || e.KeyCode;
        if  ( key >=48 && key <= 57)
         // to check whether pressed key is number or not 
                return true; 
         else return false;
}
</script>

What I want is:

onkeypress of my_text if the pressed key is number allow otherwise deny writing of the character.

But the above code doesn't work, my_text element accept any character, what is wrong with the above code ?!..

Help Please!..

there is a lot of content about how to make this, here is one example: http://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input and if you want to use jquery maybe this can help http://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery — Enmanuel Duran, Sep 07 '16 at 06:22
Possible duplicate of [Allow only numeric value in textbox using Javascript](http://stackoverflow.com/questions/7454591/allow-only-numeric-value-in-textbox-using-javascript) — Abhijeet, Sep 07 '16 at 06:23

score 4 · Accepted Answer · edited May 23 '17 at 12:09

4

I think the easy way to do this would be:

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57' />

But the problem comes up when you paste some text then HTML5's number type input may be a better choice:

<input type="number" />

BTW you can find better suggestions if you search the SO like this.

edited May 23 '17 at 12:09

Community

1
1

answered Sep 07 '16 at 06:28

Morteza Tourani

3,506
5
41
48

score 3 · Answer 2 · answered Sep 07 '16 at 06:40

3

Some very complex answers, but it can be as simple as using a regular expression to return the result of checking if the input was a number or not:

<input onkeypress="return /\d/.test(String.fromCharCode(event.keyCode || event.which))">

Note that this will not stop entering of non-digit characters by pasting, dragging and dropping or script.

answered Sep 07 '16 at 06:40

RobG

142,382
31
172
209

This does not allow for use of the keypad. – rockmandew Dec 04 '19 at 16:24

score 1 · Answer 3 · answered Sep 07 '16 at 06:40

var input = document.getElementById('my_text');
input.onkeydown = function(e) {
    var k = e.which;

    if ( (k < 48 || k > 57) && (k < 96 || k > 105) && k!=8) {
        e.preventDefault();
        return false;
    }
};

and

<input type="text"  id="my_text" size="30"/>

user5820972 · Answer 4 · 2019-07-19T15:36:39.540

Allows only [0-9] number, numpad number, arrow, BackSpace, Tab, Del as wel as Ctrl + C, Ctrl + V, Ctrl + A. Allow only one dot. Remove if last char is dot on a blur event.

element.on('keydown', function(e) {
    var arrowsKeyCodes = [37, 38, 39, 40];
    var numPadNumberKeyCodes = [96, 97, 98, 99, 100, 101, 102, 103, 104, 105];
    var dots = [110, 190];
    var tabBackDel = [8, 9, 46];
    var acv = [65, 67, 86];

    // Allow only one dot.
    if (e.target.value.indexOf('.') !== -1 && dots.indexOf(e.keyCode) !== -1) {
        event.preventDefault();
    }

    // allow only [0-9] number, numpad number, arrow,  BackSpace, Tab, Del
    // Ctrl + C, Ctrl + V, Ctrl + A
    if (
        (e.keyCode < 48 &&
            arrowsKeyCodes.indexOf(e.keyCode) === -1 || e.keyCode > 57 &&
            numPadNumberKeyCodes.indexOf(e.keyCode) === -1 &&
            dots.indexOf(e.keyCode) === -1
        ) &&
        tabBackDel.indexOf(e.keyCode) === -1 &&
        (e.ctrlKey === false || e.ctrlKey === true && acv.indexOf(e.keyCode) === -1)
    ) {
        e.preventDefault();
    }
});

element.on('blur', function(e) {
    var value = e.target.value;
    if (value.substring(value.length - 1) === '.')
        e.target.value = value.substring(0, value.length - 1)
});

score 0 · Answer 5 · answered Sep 07 '16 at 06:24

0

Have not tried this out, but you can use parseInt in your function to check like:

var t = document.getElementById("my_test").value;

if (parseInt(t) == 'NaN') {
    // not a number
}

answered Sep 07 '16 at 06:24

Prem Raj

849
4
15

So '1kasdfkas' is OK? – RobG Sep 07 '16 at 06:37

score 0 · Answer 6 · answered Sep 07 '16 at 06:30

<html>
<body>
    <input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()"><br>
   </body>

<script>
    function edValueKeyPress()
    {
        var edValue = document.getElementById("edValue");
        var s = edValue.value;

        var lblValue = document.getElementById("lblValue");

      if  ( s >=48 && s <= 57)

         // to check whether pressed key is number or not 
               return true; 


         else return false;



    }
</script>    

</html>

Use this tested code.it's help you.

score 0 · Answer 7 · answered Sep 07 '16 at 08:57

You can Simply use JavaScript or HTML5 to execute this JavaScript:

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'></input>

HTML 5 (does not require JavaScript, and also does not behave in standard way in many modern browsers.)

<input type="number">

FIDDLE

How to valid Numeric values onkeypress

7 Answers7