HTML5 Input type=number removes leading zero

Question

In Chrome 15, when using the element as a text field, leading zeros (e.g. 011) are removed even if the number entered does not break the validation rules (e.g. min, max). Is there an attribute to force the zero to remain in the field after it loses focus? The application for this is numeric data such as international phone prefixes.

How is this form structured? Is the number put in one textfield, or in separate textfields? — Edwin, Dec 08 '11 at 20:53
The form is a pretty standard form. Multiple fields with a variety of inputs including text, radio, checks, dates and numbers. In this particular case, I want to use number for my numeric fields such as zip codes — Evan, Dec 09 '11 at 17:00

score 59 · Answer 1 · edited Feb 16 '12 at 20:31

59

<input type="text" pattern="[0-9]*" ...

that should do it for you. Will bring up the numeric keypad on iPhone and the nicer Android phones I've tested on.

edited Feb 16 '12 at 20:31

Bart

19,692
7
68
77

answered Feb 16 '12 at 20:24

Lar

591
4
2

2

If you don't want the phone extras (like `#` and `*`) that you would get on a mobile keyboard, this is the real answer. – Alex Wayne May 15 '13 at 23:06
20

It seems, It brings text keypad on Android with Chrome. – chhantyal Feb 19 '15 at 15:28
3

@DROPTABLEusers The dinosaurs became extinct 65 million years ago. – candlejack Jul 14 '16 at 15:41
3

@alessadro their ghosts are still around tho – DROP TABLE users Jul 14 '16 at 17:33

score 42 · Answer 2 · answered Dec 08 '11 at 21:02

42

<input type="tel"> has been introduced for this exact purpose. It's one of the new input types in HTML5.

answered Dec 08 '11 at 21:02

Dennis Traub

50,557
7
93
108

7

I appreciate the suggestion! However, I also have zip codes and other informational numeric fields where leading zeros are significant. I'd like to make my markup as semantic as possible, and am looking for a way to ensure the zeros remain, regardless of the specific use, and without resorting to the generic type=input – Evan Dec 09 '11 at 16:58
`number` obviously doesn't do what you need and `tel` does. You asked if there's an attributes that doesn't delete the leading number. Well: `tel` is the answer. Also the input type is less about semantics and more about user interface (which keyboard to display on a smartphone etc.). – Dennis Traub Dec 10 '11 at 12:06
1

Using this with a pattern of `\d{5}-?(\d{4})?` works great for zip codes. – Lefka Feb 02 '16 at 15:14

score 23 · Answer 3 · answered Dec 18 '12 at 15:58

I needed it for mobiles browsers and I used a mix of both solutions like this :

<input type="tel" pattern="[0-9]*">

On iOS, the numeric keyboard appear with only numbers available (no # or * symbols) whereas on Android phones, the "tel" is correctly interpreted but not the pattern (not yet on the few phones I have).

I guess that when android browsers will start to implement "pattern" attribute, this should work fine on android too (as the whatwg spec suggests).

Until then you will have to check for non numeric characters in your input and remove them. javascript replace(/[^0-9*]/g,'') is useful for this.

hope this helps

Just Shadow · Answer 4 · 2021-06-16T19:00:01.377

16

8 Years later...

Beware:
The answers with the usage of type="tel" don't fully solve the issue especially in the case of numeric fields where you might want to write floating/decimal numbers and other allowed characters (like +-.,).

Solution:
Consider using text input with pattern and inputmode like this:

<input type="text" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+">

Details:
The pattern there will help to keep leading 0s, and behave like a numeric field (with all the other allowed characters).
And the inputmode="numeric" will pull the numeric keyboard instead of the default one.

edited Jun 16 '21 at 19:00

answered Jan 31 '19 at 15:11

Just Shadow

10,860
6
57
75

2

This breaks some functionalities, like being able to use up/down arrows to respectively increment and decrement input value. – Wojciech Maj May 03 '19 at 12:10
inputmode is currently not supported for all browsers (only Chrome/Opera). and MDN says the following: > The WHATWG spec lists inputmode, and modern browsers are working towards supporting it. The W3C HTML 5.2 spec however no longer lists it (i.e. marks it as obsolete). You should consider the WHATWG definition as correct, until a consensus is reached. – stephanfriedrich Jun 20 '19 at 07:11
UPDATE: It's **supported** on Chrome, Mozilla, Opera and Edge, and all the mobile browsers. The only exception is Safari on desktop (though for iOS it works fine). For more info see [inputMode support](https://caniuse.com/?search=inputmode) – Just Shadow Feb 10 '22 at 16:20

score 5 · Answer 5 · answered Dec 12 '11 at 17:41

The answer WHATWG provided me in IRC was that for non-numeric (e.g. not float/int) data that is numeric in nature, text is generally the correct type of input to use. The expection is if you are using something where a specific input type (e.g. telephone numbers, dates) already exists.

input type=number should only be used for inputs that are literally numbers (int), and not data that uses numerals (such as postal codes).

HTML5 Input type=number removes leading zero

5 Answers5

Linked