Number input type that takes only integers

Question

I m using the jQuery Tools Validator which implements HTML5 validations through jQuery  It s been working great so far except for one thing  In the HTML5 specification  the input type  quot number quot  can have both integers and floating-point numbers  This seems incredibly short-sighted since it will only be a useful validator when your database fields are signed floating-point numbers  for unsigned ints you ll have to fall back to pattern validation and thus lose extra features like the up and down arrows for browsers that support it   Is there another input type or perhaps an attribute that would restrict the input to just unsigned integers  I couldn t find any  thanks  EDIT Ok  guys  I appreciate your time and help  but I see many undeserved up-voting going on  D  Setting the step to 1 is not the answer since it doesn t restrict the input  You can still type a negative floating-point number into the textbox  Also  I am aware of pattern validation  I mentioned it in my original post   but that was not part of the question  I wanted to know if HTML5 allowed restricting an input of type  quot number quot  to positive integer values  To this question the answer  it seems  would be  quot no  it does not quot   I didn t want to use pattern validation because this causes some drawbacks when using jQuery Tools validation  but it now seems that the specification doesn t allow for a cleaner way to do this

User · Answer

Set the step attribute to 1    lt input type  number  step  1    gt    This seems a bit buggy in Chrome right now so it might not be the best solution at the moment   A better solution is to use the pattern attribute  that uses a regular expression to match the input    lt input type  text  pattern   d     gt     d is the regular expression for a number    means that it accepts more than one of them  Here is the demo  http   jsfiddle net b8NrE 1

User · Answer

Pattern are always preferable for restriction  try oninput and min occur 1 for inputting only numbers from 1 onwards    lt input type  text  min  1  oninput  this value this value replace    0-9  g                                       value   var   gt

User · Answer

Maybe it does not fit every use case  but   lt input type  range  min  0  max  10    gt    can do a fine job  fiddle   Check the documentation

User · Answer

x000D   x000D   lt input type  number  oninput  this value   Math round this value     gt  x000D   x000D   x000D

User · Answer

The easy way using JavaScript    lt input type  text  oninput  this value   this value replace    0-9   g       this value   this value replace           g    1      gt

User · Answer

Set step attribute to any float number  e g  0 01 and you are good to go

User · Answer

The best you can achieve with HTML only  documentation    x000D   x000D   lt input type  number  min  0  step  1   gt  x000D   x000D   x000D

User · Answer

Shortest This is size improvement of R  Yaghoobi answer  x000D   x000D   lt input type  number  oninput  this value  0   gt  x000D   x000D   x000D   We use here standard shorthand for  quot OR quot  operator e g 9   2   11  in binary  0b1001   0b1010   0b1011   This operator first cast numbers to integers in implicit way and then do OR  But because OR with zero don t change anything so number is cast to integer  OR with non-number string gives 0

User · Answer

I was working oh Chrome and had some problems  even though I use html attributes  I ended up with this js code      element   on  input   function            var value     this  val               this  val                this  val parseInt value             return true

User · Answer

Pattern is nice but if you want to restrict the input to numbers only with type  text   you can use oninput and a regex as below    lt input type  text  oninput  this value this value replace    0-9  g       id  myId   gt    I warks for me

User · Answer

In the Future     see Can I Use    on user agents that present a keyboard to you  you can restrict a text input to just numeric with input inputmode

User · Answer

The integer input would mean that it can only take positive numbers  0 and negative numbers too  This is how I have been able to achieve this using Javascript keypress   lt input type  quot number quot   keypress   quot keypress  event   event target value  quot   gt   keypress evt  value          if  evt charCode  gt   48  amp  amp  evt charCode  lt   57     value   quot  quot   amp  amp  evt charCode    45                        return true            return false     The given code won t allow user to enter alphabets nor decimal on runtime   just positive and negative integer values

User · Answer

lt input type  quot text quot  name  quot PhoneNumber quot  pattern  quot  0-9  10  quot  title  quot Phone number quot  gt   Using this code  the input to the text field limits to enter only digits  Pattern is the new attribute available in HTML 5  Pattern attribute doc

User · Answer

var valKeyDown  var valKeyUp    function integerOnly e        e   e    window event      var code   e which    e keyCode      if   e ctrlKey            var arrIntCodes1   new Array 96  97  98  99  100  101  102  103  104  105  8  9  116        96 TO 105 - 0 TO 9  Numpad          if   e shiftKey                               48 to 57 - 0 to 9              arrIntCodes1 push 48                      These keys will be allowed only if shift key is NOT pressed             arrIntCodes1 push 49                      Because  with shift key  48 to 57  events will print chars like            etc              arrIntCodes1 push 50               arrIntCodes1 push 51               arrIntCodes1 push 52               arrIntCodes1 push 53               arrIntCodes1 push 54               arrIntCodes1 push 55               arrIntCodes1 push 56               arrIntCodes1 push 57                     var arrIntCodes2   new Array 35  36  37  38  39  40  46           if    inArray e keyCode  arrIntCodes2     -1                arrIntCodes1 push e keyCode                     if    inArray code  arrIntCodes1     -1                return false                      return true         integerOnly   keydown function  event        valKeyDown   this value      return integerOnly event            integerOnly   keyup function  event               This is to protect if user copy-pastes some character value         valKeyUp   this value                             In that case  pasted text is replaced with old value      if   new RegExp    0-9      test valKeyUp         which is stored in  valKeyDown  at keydown event            this  val valKeyDown                        It is not possible to check this inside  integerOnly  function as                                                        one cannot get the text printed by keydown event                                                         that s why  this is checked on keyup       integerOnly   bind  input propertychange   function e         if user copy-pastes some character value using mouse     valKeyUp   this value      if   new RegExp    0-9      test valKeyUp               this  val valKeyDown

User · Answer

Yes  HTML5 does  Try this code  w3school     lt  DOCTYPE html gt   lt html gt   lt body gt    lt form action    gt    Quantity  between 1 and 5    lt input type  number  name  quantity  min  1  max  5    gt     lt input type  submit    gt   lt  form gt    lt  body gt   lt  html gt    See the min and max paremeter  I tried it using Chrome 19  worked  and Firefox 12  did not work

User · Answer

Currently  it is not possible to prevent a user from writing decimal values in your input with HTML only  You have to use javascript

User · Answer

Short and user friendly This solution supports tab  backspace  enter  minus in intuitive way  x000D   x000D   lt input type text onkeypress  return   -  0-9     test this value event key   gt  x000D   x000D   x000D   however it not allow to change already typed number to minus and not handle copy-paste case  As alternative you can use solution based on R  Yaghoobi answer which allow to put minus and handle copy-paste case  but it delete whole number when user type forbidden character  x000D   x000D   lt input type text oninput  this value       -   includes this value    this value   this value 0  gt  x000D   x000D   x000D

User · Answer

have you tried setting the step attribute to 1 like this   lt input type  number  step  1    gt

User · Answer

This is not only for html5 all browser is working fine   try this     onkeyup  this value this value replace    0-9  g

User · Answer

Set step  any    Works fine  Reference  http   blog isotoma com 2012 03 html5-input-typenumber-and-decimalsfloats-in-chrome

User · Answer

From the specs     step  any  or positive floating-point number   Specifies the value granularity of the element   s value    So you could simply set it to 1

User · Answer

Just putting it in your input field   onkeypress  return event charCode  gt   48  amp  amp  event charCode  lt   57

[jquery] Number input type that takes only integers?

Examples related to jquery

Examples related to html

Examples related to validation

Examples related to jquery-tools