How to make HTML input tag only accept numbers?

Question

How to make HTML input tag only accept numbers?

I need to make sure that input field only takes numbers as input value.
I want the user to be unable to type in any other characters other than numbers.
User manually enters the number not a number scroll bar.

I am using the Meteor Js.And the code as shown below.

App.html

<head>
  <title App</title>
</head>

<body>
  {{> main}}

</body>

<template name="main">
     <h1>Welcome to TICTACTOE App</h1>
    <p><b>Layout Number :</b> <input type="text" id="no"></p>
</template>



App.js


if (Meteor.isClient)
 {


  Template.main.events
  ({
    'keydown input#no' : function ()
    {
      // template data, if any, is available in 'this'
      if (event.which == 13) 
        { // 13 is the enter key event
          console.log("You pressed  enter key");
        }
    }
  });
}

if (Meteor.isServer) 
{
  Meteor.startup(function () 
  {
    // code to run on server at startup
  });
}

possible duplicate of [How to allow only numeric (0-9) in HTML inputbox using jQuery?](http://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery) — CRABOLO, Jan 07 '14 at 05:09
And possible duplicate of [HTML Text Input allow only Numeric input](http://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input) — ELavicount, Jan 07 '14 at 05:18

Shreejibawa · Answer 1 · 2014-01-07T05:12:36.613

This should help you.

<input type="number" />

:)

Or Best way to use jQuery with keycodes:

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

See DEMO.

actually i was talking about your previous post of – Cris Jan 07 '14 at 05:34 — Cris, Jan 07 '14 at 05:34

score 1 · Answer 2 · answered Jan 07 '14 at 05:09

if you use HTML5 then

<input type="number" />

else

<script>
     function isNumberKey(evt){
            var charCode = (evt.which) ? evt.which : event.keyCode
            return !(charCode > 31 && (charCode < 48 || charCode > 57));
        }
</script>

<input type="text" onkeypress="return isNumberKey(event);">

score 1 · Answer 3 · answered Jan 07 '14 at 05:28

With HTML5 it's easy:

<input type="number" />

If HTML5 is not supported use jQuery events: Live Demo

<label for="number">Number: </label>
<input type="text" name="number" id="number" />

<script>
    $('#number').keydown(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
        $(this).keyup(function(){
            $(this).val($(this).val().replace(/[^\d]/,''));
        });
    });
</script>

score 1 · Answer 4 · answered Oct 07 '14 at 04:20

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input type="someid" name="number" onkeypress="return isNumberKey(event)"/>

score 0 · Answer 5 · answered Jan 07 '14 at 05:09

0

will work only with HTML 5. If you want it to work for older browser as well you have to take help of javascript.

answered Jan 07 '14 at 05:09

Ashok

487
5
22

score 0 · Answer 6 · answered Jan 07 '14 at 05:11

Try this

<input name="amount" type="text" value="Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

You can also use the pattern attribute in html5:

<input type="text" name="name" pattern="[0-9]" title="Title" />

score 0 · Answer 7 · answered Jan 07 '14 at 05:25

On any input you need filter, you only need put the onkeydown="return onlynumbers(event);" code. This is a generic code that will work on old HTML and does not need jQuery. :)

<script type="text/javascript"> 
function onlynumbers(e) {
        if (e.shiftKey === true ) {
            if (e.which == 9) {
                return true;
            }
            return false;
        }
        if (e.which > 57) {
            return false;
        }
        if (e.which==32) {
            return false;
        }
        return true;
    }
</script>
<input type="text" onkeydown="return onlynumbers(event);">

How to make HTML input tag only accept numbers?

7 Answers7

Linked