Skip to content

/NativeScript

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add support for more keyboard types #3303

Open
EddyVerbruggen opened this issue Dec 15, 2016 · 5 comments
Open

Add support for more keyboard types #3303

EddyVerbruggen opened this issue Dec 15, 2016 · 5 comments
Labels
feature good first issue hacktoberfest

Comments

@EddyVerbruggen
Copy link
Member

@EddyVerbruggen EddyVerbruggen commented Dec 15, 2016 •
edited by rdlauer

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:

keyboardtype phone

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 🎉

keyboardtype numberpad

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):

keyboardtype decimalpad

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.
@tsonevn tsonevn added the feature label Dec 16, 2016
@EddyVerbruggen

This comment has been minimized.

Sign in to view
Copy link
Member Author

@EddyVerbruggen EddyVerbruggen commented Jan 16, 2017

For anyone looking for an ever nicer solution for iOS numeric keyboards, check out this new plugin.
@kayveedw

This comment has been minimized.

Sign in to view
Copy link

@kayveedw kayveedw commented Jan 28, 2019

Looking at the code, the current KeyboardType = "number" is used on both platforms as a type that includes decimals. iOS uses UIKeyboardType.NumbersAndPunctuation and Android uses android.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.NumberPad on iOS and
android.text.InputType.TYPE_CLASS_NUMBER | android.text.InputType.TYPE_NUMBER_VARIATION_NORMAL on Android.

What are others thoughts? Or is this feature request no longer required and can be closed off?

David
@peerit12

This comment has been minimized.

Sign in to view
Copy link

@peerit12 peerit12 commented May 14, 2019 •
edited

@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

This comment has been minimized.

Sign in to view
Copy link
Member

@NickIliev NickIliev commented May 14, 2019

@peerit12 here is a sample Playground that shows a way to access and modify the native property
@peerit12

This comment has been minimized.

Sign in to view
Copy link

@peerit12 peerit12 commented May 14, 2019

@NickIliev thanks for helping me out with this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature good first issue hacktoberfest
Projects
None yet
Milestone
No milestone
6 participants
@EddyVerbruggen @kayveedw @peerit12 @NickIliev @radeva @tsonevn
You can’t perform that action at this time.