Ionic/HTML5 - Decimal Keyboard Input?

Question

How do I display a numeric keyboard with a decimal button on iOS and Android? Is there an Ionic-specific way to do this?

I'm able to display a numeric keyboard on both iOS and Android with the following:

<input type="number" pattern="[0-9]*">

iOS appears to disregard the type of value "number" and displays the number pad based off the pattern attribute, but the type is set to "number" anyway for Android.

Edit: Forgot to mention that I have tried pattern="[0-9.]*". iOS simply shows the full keyboard when I do this.

Edit2: I've also tried pattern="\d+[,.]?\d*" - again, to no avail.

Answer 1

Try the below syntax to achieve this. Its working in iPhone and Android.

<ion-input inputmode="decimal" type="number" />

Answer 2

Seems that the problem is relative to some samsung devices only.

I have the same issue that you describe on Samsung Galaxy Note 8.0 (android 4.4.2) but everything works fine on Nexus simply using

<input type="number" step="0.01"> 

related posts Google Chrome on Android (and only Android) Does not allow Decimal with type number and step="any"

and Samsung Galaxy Tablet does not allow entering floating point numbers to inputs with "number" type