How can I make html5 text field to display number pad?

Question

Phonegap>android

I know I can use type="number" to display the number pad but the issue is that I want to reformat the input as price as the user types in. So it will be in the format of dollars and cents (like $343,23.50) and the type="number" field does not allow other than numeric characters.

So I want to have a text field but it should display number pad on tap. Is it possible?

Answer 1

For Android, you typically need type="number" to default to the numeric keyboard. (Some work arounds to that for iPhone for what it's worth.) You can't display non-numerics in a type="number" as you type. To display as you type, you'll need type="text", and then you could possible use an existing plugin like autoNumeric to format as you type but then you'll keep on getting pushed to default to a non-numeric keyboard, often on every key press.

Your best workaround solution is probably to have type="number" for editing and switch to type="text" or some other field to display formatted when the field doesn't have the focus or at the same time. And/or, you could detect if the browser is on a device with the default keyboard issue or not and if not, you can stay with type="text" and format nicely as you go along. Other workarounds I've seen are spinners (not good for large numbers such as credit cards) or widgets with their own pseudo-keyboards.

If not inappropriate to mention, I've recently finished working on a type="number" plugin to help address the type="number" Android issue, and am putting a web site together to share it. Happy to forward the URL in private to you, (plugin is downloadable and the API is documented in detail) but I don't want to publish the site here just yet until I've finished putting up the pages. Would be happy to come back and edit this answer when it's ready to include the URL.

Answer 2

For an all inclusive solution, I think you are out of luck unless you use type="text" and use a format function onchange. However, you could use the number field like below which will give you your two decimal places and then just place the dollar symbol in front of the input field.

<div>$<input type="number" step="0.01"/></div>