The Current State of HTML5 Forms

The number Type

<input type=number>

Live Demo



Firefox
11-
Safari
3
Safari
4
Safari
5.2+
Safari Mobile
4+
Chrome
9-
Chrome
10+
Opera
11+
IE
9-
Android
2.3+
No support No support Kinda supported Supported Kinda supported Kinda supported Supported Kinda supported No support Kinda supported

Supported Browser Screenshots

Opera 9 (notice right alignment)
Safari 5 (regular left alignment)
Mobile Safari (i0S 3.1) Keyboard

The Low Down

The number input type is for, you guessed it, numbers.

  • Mobile Safari and Android do not validate, but does provide a number-based keyboard when this input is in focus. Not as limited as the numbers-only telephone keyboard, has more keys available (like a period). iOS 4 will allow anything to be submitted while iOS 5 will remove anything you enter in the input that isn't part of a floating point number (e.g. periods and dashes are OK) on blur. iOS 5 will give you the "numbers only" keyboard (a bit like type=tel) if you use pattern="[0-9]*".
  • Chrome 10-11 won't allow you to enter any character other than numbers, ".", or "e". Also has increment "spinners". Will allow you to type a period, but not actually submit. Multiple periods will truncate the rest of string and will submit. Chrome 12-14 (and IE 10) will allow you to type non-numeric characters, but they are removed immediately upon blur (and will not submit) which ahears to the spec. Chrome 12-14 will also auto-reformat numbers to include commas (e.g. 2000000 turns into 2,000,000 = bad for using for something like a credit card number). Chrome 15 has stopped reformatting numbers, although things like spaces are still not allowed meaning it's still not a good choice for credit card numbers.
  • Opera (tested 11) will allow any character. Non-numbers also pass validation. Does have "spinners" (and and down arrows to increment number).
  • If the min, max, or step attributes are also present, that will validate as well (no lower than min, no larger than max, value % step = 0)
  • Notice there are no validation message screenshots. Of the browsers that support this, Opera will accept anything and Chrome won't allow you to type anything invalid.
  • Incrementing works with the mouse scroller (tested in Opera 11 and Chrome 10-17, Safari 5.2).
  • In Safari 5.0.x, if you don't preset a value, clicking the up/down spinner boxes will results in the "maximum JavaScript number", that is, plus or minus 1.7976931348623157e+308. A user would never be able to get back to a reasonable number via the spinner or scrolling. Safari 5.1 fixed this.
  • IE 10 claims to support it but doesn't validate it or provide and UI.