Show Decimal Keyboard in HTML5 iOS 7 / iOS 8

Question

I just have a simple question after having searched for hours now: Is there any possibility to show the decimal keyboard in webbrowsers input fields? input type="number" only shows numbers but i need a comma or dot instead in the bottom left corner.

I tried anything, pattern, step etc., but nothing brings up the decimal keyboard. I only need the numbers and a dot or comma, no A-Z or a-z or anything else.

<input type="number" id="inputNumbers" pattern="[0-9]*" size="30" min="1" max="5">

This is what i get: enter image description here

This is what i want: enter image description here

score 11 · Accepted Answer · answered May 24 '19 at 13:51

11

Checkout inputmode="decimal" starting on iOS 12.2

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

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

answered May 24 '19 at 13:51

vguerrero

898
11
13

score 3 · Answer 2 · answered Apr 02 '17 at 00:01

3

https://github.com/mrchandoo/cordova-plugin-decimal-keyboard

Lets you configure the decimal character(instead of . you can change to , )

answered Apr 02 '17 at 00:01

Chandra Sekhar Walajapet

2,534
17
24

score 3 · Answer 3 · answered Apr 09 '20 at 12:09

3

This works for iPhone and Android:

<input type="text" inputmode="decimal">

Results in this keypad with iPhone 10:

And with Android:

answered Apr 09 '20 at 12:09

Avatar

14,622
9
119
198

Just as a note, if using React or similar, you may need to call this inputMode instead of inputmode. – johnnyb Nov 23 '22 at 15:38

score 1 · Answer 4 · edited May 23 '17 at 12:32

1

Try this:

EditText myEditText = (EditText)findViewById(R.id.myEditText);
myEditText.setInputType(InputType.TYPE_NUMBER_FLAG_DECIMAL);

Or:

<input type="tel" />

This is a bit of a hack:

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

Might work depending on what you are trying to achieve when it comes to input values

This link might be useful: Force iOS numeric keyboard with custom / currency pattern

Hope you come right!

edited May 23 '17 at 12:32

Community

1
1

answered Jun 23 '15 at 12:02

Dave

967
10
23

Have you had a look at the link? – Dave Jun 23 '15 at 12:22
2

of course i did. Doesn't work, shows the numeric keyboard without dot or comma. – Sithys Jun 23 '15 at 12:25
none of this worked for me. I ended with a not-so-ugly solution here https://stackoverflow.com/questions/14447668/input-type-number-is-not-showing-a-number-keypad-on-ios/48933150#48933150 – Guillaume Gendre Feb 22 '18 at 17:01

score -3 · Answer 5 · answered Jun 23 '15 at 12:04

-3

Check this html code according to your pattern

 <input type="text" pattern="[a-z]*">

answered Jun 23 '15 at 12:04

Hari Om Srivastava

350
1
10

Show Decimal Keyboard in HTML5 iOS 7 / iOS 8

5 Answers5

Linked