Hi,
We are using Outsystems platform version 11 and developing a Mobile application to be run on iOS.
The device we are using is iPhone 8 with iOS 13.
We have a simple form with Input field of type number. The underlying structure uses decimal type for this input.
Q : How to force a Numeric (with decimal) keyboard for entry.
I have tried several methods including the forge components below -
https://www.outsystems.com/forge/component-overview/2258/input-masks-mobile - This pops up a telephone input keypad and adjusts decimal automatically which is not the right purpose.
https://www.outsystems.com/forge/component-overview/3618/decimal-keyboard-plugin - This one uses a cordova plugin underneath but doesnt seem to be working as expected. It brings a "number only" keypad on iphone.
I tried adding an attribute to the input - as pattern = "[0-9]*" which brings a number only keypad with no decimal. Also tried with property inputmode="decimal".
I have tried adding a onready event that has javascript that sets input type to number.
None of these solutions have worked which indicates there is no way to bring keypad with decimal only on iPhone.
Are there any other solutions I should try?
You could try adding the attribute decimal=true to the input. (your comment mentioned inputmode=decimal which is close but not the same)
I believe you may need to have the decimal keyboard plugin installed as well.
<input type="text" pattern="[0-9]*" decimal="true">
I'm dealing with the same issue. If you add inputmode="decimal" outsystems won't render the attribute in the page if you type inputMode="decimal" (camelcase) it will be rendered but not working. I've tested in jsfiddle and other websites that inputmode="decimal" does work on the IOS device.
I still have't found a working solution the best we've done is an acceptable solution that provides the numeric keyboard which you can see here. By adding type="number"
https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
Hi, to achieve this, you just need to set in the attribute type = "numeric" ou "tel".
Change from "tel" to "numeric" to achieve what you want.
I have tried this in my android phone (Android 15).
And this is working as expected numeric keyboard with decimal.
here is the result:
Thanks Matheus Rodaelli Gaiotto