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.

On Android there's no way to force a specific keyboard. You give it an input type, and the keyboard (which is an app) decides the best thing to show for it. If it decides not to show a ., there's no way to force it. — Gabe Sechan, Mar 12 '15 at 18:47
@IanMacDonald I forgot to mention I tried that to no avail. That was my first attempt after I found that the pattern of `[0-9]*` worked for a regular number pad. — Chad, Mar 12 '15 at 18:50
@Cᴀʟʟᴏᴅᴀᴄɪᴛʏ nope, there does not seem to be a universal way to achieve this, at least not yet. — Chad, Jan 04 '17 at 18:27

score 6 · Answer 1 · answered Sep 24 '19 at 07:16

6

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

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

answered Sep 24 '19 at 07:16

Prabu Thiyagarajan

71
1
1

After testing every conceivable techniques that i could find on internet, this is the only way i could have a decimal point on my iphone. I don't understand the downvote. – Julien Grimal Jul 20 '20 at 00:51
Works on Ionic as well. – Roman A. Jul 12 '23 at 20:33

score 2 · Answer 2 · edited May 23 '17 at 12:16

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

edited May 23 '17 at 12:16

Community

1
1

answered Apr 01 '15 at 10:33

Luca Farsetti

257
2
14

This does not work on iOS. I'm starting to think it's (currently) not possible to show a numeric keyboard w/ decimal on both iOS **and** Android. – Chad Apr 03 '15 at 19:47

score 0 · Answer 3 · answered Mar 04 '19 at 16:24

0

refer this link: https://github.com/skol-pro/ion-digit-keyboard-v2#6---example--demo

just hide the native keyboard on setfocus().

answered Mar 04 '19 at 16:24

Tejashri Patange

329
2
6
24

Ionic/HTML5 - Decimal Keyboard Input?

3 Answers3