Repository navigation
Add support for more keyboard types #3303
Description
Hi folks,
I'm not only submitting this issue as a feature request, but also as "poor mans documentation" offering a solution to others looking for a similar issue.
I'm developing an app where I want the user to be able to enter a PIN code, so only numbers. I thought I'd use the number keyboard type on Android and phone on iOS. Android is fine, but I wanted to get rid of the characters in the lower left corner on iOS:
Since the {N} KeyboardType enum doesn't contain the numberPad type I did this ({N}-Angular):
@ViewChild("pincodeField") pincodeField: ElementRef;
this.pincodeField.nativeElement.ios.keyboardType = Constants.IOS_KEYBOARD_TYPES.numberPad;Where Constants.IOS_KEYBOARD_TYPES.numberPad is just a custom property that resolves to 4.
This gives me a nice and clean PIN entry keyboard 🎉
Note that there's also a sweet decimalPad, constant value is 8 which renders this keyboard which I'm using for entering fractions (like payments):
Wouldn't it be nice if I can use this to achieve the same thing?
<TextField #pincodeField keyboardType="numberPad"></TextField>
<TextField #amountField keyboardType="decimalPad"></TextField>Surely these properties are iOS-specific but differentiating between iOS and Android is quite easy in {N}'s views anyway. Or we can tie the [keyboardType]="keyboardType" to a property of the component. We can also just use the closest Android keyboard so users don't even need to bother specifying that seperaterly.
Thanks for considering!
Eddy
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
Activity
EddyVerbruggen commentedon Jan 16, 2017
For anyone looking for an ever nicer solution for iOS numeric keyboards, check out this new plugin.
kayveedw commentedon Jan 28, 2019
Looking at the code, the current
KeyboardType = "number"is used on both platforms as a type that includes decimals. iOS usesUIKeyboardType.NumbersAndPunctuationand Android usesandroid.text.InputType.TYPE_CLASS_NUMBER | android.text.InputType.TYPE_NUMBER_VARIATION_NORMAL | android.text.InputType.TYPE_NUMBER_FLAG_SIGNED | android.text.InputType.TYPE_NUMBER_FLAG_DECIMAL.It would likely cause a breaking change for existing code if these were changed to a number only pad as you request.
Therefore, I propose this could be done with a new enum value for
KeyboardType, suggestion being"integerOnly". As requested, this would map to:UIKeyboardType.NumberPadon iOS andandroid.text.InputType.TYPE_CLASS_NUMBER | android.text.InputType.TYPE_NUMBER_VARIATION_NORMALon Android.What are others thoughts? Or is this feature request no longer required and can be closed off?
David
peerit12 commentedon May 14, 2019
@EddyVerbruggen can you please explain how can i get decimal pad on ios. i tried al the steps but not getting success. can you please explain this in a little more detail
when i define keyboardType="decimalPad" in tns.html then it gives an error cannot find variable decimalPad
also used this apporach
@ViewChild("pincodeField") pincodeField: ElementRef;
this.pincodeField.nativeElement.ios.keyboardType = 8;
but nothing happens it gives the default keyboard.
NickIliev commentedon May 14, 2019
@peerit12 here is a sample Playground that shows a way to access and modify the native property
peerit12 commentedon May 14, 2019
@NickIliev thanks for helping me out with this
NickIliev commentedon Dec 11, 2019
Closing the issue as there are 5 different cross-platform keyboard types exposed. If anyone is interested in providing, even more, we are open to PRs or you could directly access the native API (as shown for iOS here) and implement it directly in the app.
asciidiego commentedon May 29, 2020
@NickIliev Any plans on implementing UIKeyboardType with punctuation, which includes support for
,or.. Or, do you know any workarounds?NathanWalker commentedon Oct 23, 2026
Closing as completed:
keyboardTypesupportsdatetime,phone,number,url,emailandinteger(#8190). Any other platform keyboard type can be set directly on the native view (e.g.textField.ios.keyboardType = UIKeyboardType.DecimalPad). Thanks for the write-up!