iphone input type (number with two decimals)

Question

I'm developing an iphone application with phonegap, this means my application is in html5, javascript and css. I have a form with a field for weight on an object. I'm trying to get an input type similar to;

<input type="time"/>

Html5 supports different types of input, and this will toggle a different keyboard for the iphone, for example the numeric keyboard for numbers. The one I'm looking for is the one where you can roll vertically over numbers. Like when you set your alarm clock on the iphone, example below.

http://blog.ringtonefeeder.com/wp-content/uploads/2009/01/iphone-alarm.png

The input type="time" gives me that, but it's restricted to 24 hour window and 1-59 minute window.

Is there anyway to customize this input type so I can get a 2 decimal number? in the range of 0-999.99 kg.

I realize this is a vague question but it's hard to explain.

Answer 1

Have a look at inputmode="decimal" attribute.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

Not widely supported yet but it comes available in iOS 12.2.

https://caniuse.com/#feat=input-inputmode

Answer 2

As far as I know, there's no way of doing this in the PhoneGap world. You can view the available keyboards here. You could probably roll your own if you're capable in objective-C, but then you'd have a create a plug-in for it so PhoneGap could see it.

One of the keyboards not shown on that page is: UIKeyboardTypeDecimalPad, which is a telephone keypad with just numerals and a decimal point, which might also work for your application. Shown here:

However, I've been unable to figure out how to have it shown via HTML.

If you want the telephone keypad, you'd use:

<input type="tel">

Similarly if you wanted a numeric keypad, it'd be:

<input type="number">

As far as I know (and someone please correct me if I'm wrong), there's no equivalent for UIKeyboardTypeDecimalPad like this made up type:

<input type="decimalNumber">