CODEWITHSUNDEEP
javascriptioshtmlcsscordova
Sithys
Sithys

Reputation: 3793

Show Decimal Keyboard in HTML5 iOS 7 / iOS 8

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

Upvotes: 22

Views: 19635

Answers (5)

Avatar
Avatar

Reputation: 15166

This works for iPhone and Android:

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

Results in this keypad with iPhone 10:

iPhone 10 Decimal Keypad

And with Android:

Android Decimal Keypad

Upvotes: 6

vguerrero
vguerrero

Reputation: 1056

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

Upvotes: 14

Chandra Sekhar Walajapet
Chandra Sekhar Walajapet

Reputation: 2554

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

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

enter image description here

Upvotes: 4

Hari Om Srivastava
Hari Om Srivastava

Reputation: 346

Check this html code according to your pattern

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

Upvotes: -5

Dave
Dave

Reputation: 987

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!

Upvotes: 1

Related Questions