Using a number keypad with a decimal point via HTML5/JS/PhoneGap

Question

I think a similar question has been asked here, but the solutions accepted were the standard HTML5 input type declarations. Allow me to explain:

I want to use the iPhone number keypad which you can trigger with input type="number" but have an asterix appear on that keypad. Now, I don't think this is possible through PhoneGap, yet it is definitely possible through iOS via UIKeyboardTypeDecimalPad but as I'm building hybrid applications, I don't have access to native code, which is where my problem lies. Is it simply not possible to edit the keypad through Javascript/PhoneGap adapter? I wouldn't be too surprised but I'm looking to get as close to confirmation of that as possible.

I know of one half-house alternative, which is:

<input type="number" name="n" />

This will show the numbers as well as some characters. The only problem with this is that I really like having the numbers really big as it improves the user's experience a considerable amount. Any thoughts on this are welcomed as I've been scratching my head on this for days!

Thanks!

Answer 1

Apple has a great document: User Experience Coding How-To's for Safari on iPhone .

To display a numeric keyboard, set the value of the pattern attribute to "[0-9] " or "\\d ".

This results in this:

<input type="text" name="n" pattern="[0-9]*" />

Answer 2

I have been looking at this problem and I have concluded that it's not possible yet, I hope the phonegap team implement it soon. There is this jquery keypad that you could implement but I have not tried it yet because it would look out of place in a mobile app