Question

I have an input field for users to input a monetary amount:

<input type="number" value="{{ order.amount }}" />

I chose the number input type because I want the number keyboard to appear when the field is clicked. I can’t use type="text" pattern="[0-9]*" (suggested here) because that causes the number-only input pad to appear which doesn’t have a decimal point.

Unfortunately, if the value attribute is anything but numeric (including an empty string or space), the field renders with a default value of "0":

    

This stinks because the user needs to hit ⌫ before entering a value.

Is there any way to fix this?

Update: I’m an idiot. Some JavaScript was validating and reformatting the field. Nevermind.

Answer 1

I would look at the code you are using to set the value attribute of this field (value="{{ order.amount }}"). The reason I say this is that in Mobile Safari a “vanilla” numeric field is empty, i.e. no 0 by default.

Your screenshot suggests to me that you’re using jQuery Mobile, so I checked using that in case the issue lay there, but again, no default value of zero.

For what it’s worth, this is the mark-up I’m using (which renders an empty number field in iOS emulators and on an iPhone 3GS):

<input type="number" value="" />