The number Type

Live Demo

Firefox 29+	Safari 5+	Safari 3.2+	Chrome 7+	Opera 9+	IE 10+	Android 4+

The Low Down

The number input type is for, you guessed it, numbers: either integers or floating point numbers.

• Supporting browsers should display a spinner to increment and decrement the value.
• Dynamic keypads should display a numeric keypad on focus, ignoring any included inputmode attribute.
• By default the step, or increment, is 1. To accept any floats, or values that are not necessarily increments of 1 over the min value, make sure to set the step attribute to any: step="any".
• If step is set, the spinner will increase or decrease by that increment. If step is omitted, set to the default value of 1, or set to any, the spinner will increment by 1.
• If the user enters a number that is a step mismatch, clicking the up arrow on the spinner will round the number up to the next step increment, and down will round down. The stepDown() and stepUp() methods will increment and decrement the value as well.
• The global attributes, autocomplete, list, max, min, placeholder,readonly, required, step, and value attributes are relevant to the number input type. The pattern and size attributes are not relevant for the number type and will be ignored if included.
• When min, max and step are set, some browsers may display a narrower input box for number input type, as the width of the widest valid value is limited. Chrome and iOS 7 are among those that currently do this.
• IE, iOS Safari, Android, and Chrome for Android show the numeric keypad, but don’t provide the spinner UI. On most devices, the numeric keypad is not as limited as the numbers-only telephone keyboard: it has more keys available, like the period, and allows you to access all the keys on some keypads, like iOS. IE, however, the numeric keypad is more limited than tel, giving you simply the 10 digits and a period.
• Non floating point numbers are not valid. iOS 5+ and IE 10+ 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. Chrome used to do this, but no longer deletes invalid data on blur. Opera and Firefox don’t either.
• Chrome 12-14 used to auto-reformat numbers to include commas (e.g. 2000000 turned into 2,000,000, which would be odd for social security or credit card numbers. This has been resolved since Chrome 15.
• Because of the spinner UI, the number input type is not appropriate for numeric strings like zip codes, social security number or credit card numbers.
• Validation of the number type will test to see if there is a typeMismatch, and, if the min, max, or step attributes are also present, will look for an rangeUnderflow, rangeOverflow or stepMismatch.
• If invalid, Firefox, Chrome, and IE provide an error message. Opera gives the element focus with no verbiage. Safari (Currently 7) does not provide constraint validation on form submission.
• Cross browser verbiage, if min=100, max=999, step=5, numbers entered being 1000, 0, 111 and -e
  • Firefox:
    Please select a value that is lower than 999.
    Please select a value that is higher than 100.
    Please select a valid value. The two nearest valid values are 110 and 115.
    Please enter a number.
  • Chrome:
    Value must be less than or equal to 999.
    Value must be greater than or equal to 100.
    Please enter a valid value. The two nearest valid values are 110 and 115.
    Please enter a number.
  • Internet Explorer
    You must enter a value between 100 and 999
    You must enter a value between 100 and 999
    You must enter a valid value
    (Clears invalid entries, so no error message based on non-numeric values)
• Incrementing works with the mouse scroller.