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?
Practice As Follows
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.