Search code examples
javascripthtmlionic-frameworkwebkitprogressive-web-apps

How to get a period in "tel" input on iOS keyboard (Web / Hybrid / PWA)


I'm currently writing a hybrid web app that will eventually be shipped to both Android and iOS. In the app, I require that the user be able to enter decimals.

Currently on Android, using input type="tel" works as required, it allows me to enter numeric data and it allows a decimal to be placed between them. On iOS however, I'm faced with numbers and some symbols, no period:

No period on iOS tel keyboard

The only reason I ask - instead of just using type="number" is simply because I use a native banking app that allows a period on the keyboard input, so I was hoping it was something you could achieve possibly with the assistance of a Cordova / Ionic plugin?


Solution

  • For Ionic / Cordova - I found a fix here which I have forked and adjusted, as the original repo wasn't installing for me.

    https://github.com/gbrits/cordova-plugin-ios-decimal-keyboard

    keyboard with period on ios

    Ah, 1:30am - now I can sleep free of the neurotic desire to fix the problem. (or should I say 1.30am)