HTML5 input type number removes decimal places on iPhone

Question

Possible Duplicate:
How can I make the HTML5 number field display trailing zeroes?

I'm trying to input a money value like "1.00", but when I enter this value the 0s are removed and it becomes "1", but if I input 1.11, it remains 1.11.

I'm using <input type="number">. I've tried using patterns but the extra 0s are always deleted. Also this only happens on iPhone with type="number"

Does anyone know how to get around this? Perhaps a way to use type="text", but have the phone open the numeric view?

score 4 · Answer 1 · answered Dec 13 '12 at 21:46

4

Here's what I used for my mobile shopping calculator.

<input type="number" name="price" step="0.01" min="0.01" max="99" />

answered Dec 13 '12 at 21:46

bobthyasian

933
5
17

This doesn't work on mobile Safari. – user1884047 Dec 13 '12 at 21:55
Works fine on my iPhone. – bobthyasian Dec 13 '12 at 21:56
I'm on iOS6 and I tested on your calculator and it still removes the extra 0s – labatyo Dec 14 '12 at 15:21
This doesn't work on Safari or iOS. – vcardillo Jun 09 '13 at 00:32

score 2 · Answer 2 · answered Dec 13 '12 at 21:41

2

Here's a possible trick:

Using position:absolute and visilibity:hidden, position your number input on top of a text input. Then, using an onchange event handler on the number input, put parseFloat(this.value).toFixed(2) into the text input.

answered Dec 13 '12 at 21:41

Niet the Dark Absol

320,036
81
464
592

HTML5 input type number removes decimal places on iPhone

2 Answers2