how to set keyboard type to decimal pad?

[ace68723]

Is it possible to do that?

[oori]

<input type="number">
also, see: #45

[benjamincharity]

I ran into a case where I couldn't use type=number but still needed to force the numeric keypad. This has been working for me:

<input type="text" pattern="\d*">

Still really wish there was a way to programmatically set the keyboard type.

[zapnap]

I've had good luck forcing the field to type="tel" and combining it with ui input masks for numeric and decimal / money entry across both Android and iOS keyboards. Entirely hacky, but it seems to work. pattern="\d*" will show you the right thing on iOS, unless you need the decimal point present.

[Obiwarn]

number and tel will not work.

keyboard.show() will open default text keyboard.

[zapnap]

Actually tel does work for me, exactly as described above.

[Obiwarn]

if you used numpad somewhere in the app before then yes.
else it will open the default pad.

[souly1]

type="tel" works for me as well, but having it create a ton of input verifications and bad UX experience (in my opinion), and not finding a plugin that achieves the production level I was aiming for (nor in the UX or customisation aspect), I've created a new one currently used in our live mobile app. The number picker / spinner is implemented as an attribute directive, so stick to any DOM element, or your existing input fields (just remember to set their css to read only) and voila, solve a bunch of headaches (input verifications, user churn, etc.)

The directive acts as you'd expect it, with drag capability as in native devices, with a slick look, highly customizable and plenty additional functionality.

Check it out!

https://market.ionic.io/plugins/ion-number-picker

[mnill]

I faced with same issue and made my own plugin
https://github.com/mnill/cordova-custom-keyboard

[souly1]

Hi mnill, awesome! it seems your plugin does not support android, is this planned to be added in the future?

[mnill]

I am not sure yet, is android has troubles with decimal keyboards too?

[souly1]

Depends on your definition of problem. if only solving existing keyboard problem and not substituting completely then I guess it is not relevant for now...thanks

[skol-pro]

There are other simples and customizable plugins on the store like https://market.ionic.io/plugins/ion-digit-keyboard.

[codedaemon12]

Hi mnill,

Can you please explain a little bit how can I use this plugin in my cordova app ? I am trying with your example but I am not getting the desired output. I need a keyboard with 0-9 and decimal. So i was trying 9 option. But I am getting the default keyboard with numbers and chars.

Thanks.

[mnill]

@codedaemon12 try minimum worked example from mnill/cordova-custom-keyboard#1
Also if you faced with problem - create issue in my repo. Do not spam this repo.

[codedaemon12]

Hi llya,

Thanks for this..this worked for me. I have never done coding in obj c . Do
you know if I can show done and cancel button in decimal keypad ? It will
be very helpful if u can do that. Thanks for ur help.

Thanks,
Bhaskar
On May 18, 2016 11:36 PM, "Ilya Kirichek" [email protected] wrote:

@codedaemon12 https://github.com/codedaemon12 try minimum worked
example from mnill/cordova-custom-keyboard#1
mnill/cordova-custom-keyboard#1
Also if you faced with problem - create issue in my repo. Do not spam this
repo.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#74 (comment)

[mrchandoo]

Guys i have written a plugin https://github.com/mrchandoo/cordova-plugin-decimal-keyboard , i need iOS experts to review and also others to use it and let me know

[CooleyGit]

Mrchandoo your plugin doesn't work with ionic.

[mrgoodrich]

To confirm methods shared above, the following is working for Ionic 1 on my iPhone 6s (actual screenshots):

Number keyboard:

<input type="number" pattern="\d*">

Dial pad (includes asterisk, etc):

<input type="tel">

If the symbols button is selected:

I couldn't include the input boxes for confidentiality. The plugins posted above look great for more advanced customization if necessary (and if they still work). Good luck!

[matpil]

Hi!
I have exactly the opposite issue.
I've developed an app and in input I've a type="numeric".
On my phone keypoard is exactly as narayana1240 previous image.
But someone has reported that on the phone is not so. "dot" character is not visible.

How I can solve?

regards
matpil

[c01nd01r]

Somebody knows, how to show this keyboard?

[javierlopeza]

I found this, and worked for me.
https://github.com/mrchandoo/cordova-plugin-decimal-keyboard
For Ionic 3 support, look at this: mrchandoo/cordova-plugin-decimal-keyboard#3

[simonhaenisch]

Don't know why but if I use an <ion-input>, I need to escape the \ in the pattern, otherwise it doesn't work for me:

<ion-input type="number" pattern="\\d*">

The generated standard input then is like this:

<input type="number" pattern="\d*">

Would be nice to have an info about that in http://ionicframework.com/docs/api/components/input/Input/, or maybe it's a bug?

[qiluo]

Thanks guys, <ion-input type="number" pattern="\\d*"> at least showed the numeric pad, but how to display decimal point?

[sreekanth-karini]

Guys Simple,

• Install this plugin https://github.com/mrchandoo/cordova-plugin-decimal-keyboard
• Do cordova plugin add cordova-plugin-decimal-keyboard --save from your terminal
• Use <ion-input type="text" pattern="[0-9]*" decimal="true"></ion-input> like this
• You will see the keypad be like @c01nd01r 's image above.
  Thank You.