javascript - How can I make html5 text field to display number pad? - Stack Overflow

admin管理员组

文章数量:1352788

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?

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?

• javascript
• android
• jquery
• html
• cordova

Share Improve this question Follow edited Mar 20, 2014 at 12:15 Jibran K asked Sep 24, 2013 at 12:17 Jibran KJibran K 88577 silver badges2020 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3 +50

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 e back and edit this answer when it's ready to include the URL.

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>

The problem with type = "number" is that it is not recognized by all browsers.

You can use an input mask to format your posts.
There are several plugins to do that.
For your problem, maskMoney looks appropriate.

I you are using Jquery ,Try this , I have coded in a way that on clicking in text-field it will display number-pad ,You can modify up to your needs

Code:

<input id="phone" placeholder="Phone Number" name="phoneno" type="tel" value="" ></input>

Use drop down with required characters like dollar,telephone index number +91 etc.,

Example

本文标签： javascriptHow can I make html5 text field to display number padStack Overflow