GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account. Here is my scenario: I have a form where the user enters their phone number.
The text field is bound to a view model and in some cases the phone is pre-populated. This is a perfect scenario for a masked text field. I tried handling the propertyChange event, but this did not work either. The TextField does not have any key events that I can capture at least I could not find any so I can format it manually. So, what are my options? Do I have to write my own module handling the native iOS and Android controls to achieve this?
This is a pretty common scenario and I am very surprised that there is nothing available that helps in this case. Hi dpdragnevThank you for reporting this issue. I review nativescript-maskedinput plugin and found that data binding and propertyChangeEvent works as expected for iOS. However to make it work for Android you should set property change event to the MaskedInput.
You could review the example below. In regard to your question you could specify the keyboardType for the TextField. I could not get this to work. I will start a new, clean solution and will test your suggestion there. As you can see, I have a very simple view model and I am trying to bind the masked input to the phone property. When I start the app, the masked input is empty. In your message you say that databinding is working on iOS.
Am I doing anything wrong here? It does not work for me. Hi dpdragnev. To let DataBinding works for iOS, you should add EventListener to your viewModelwhich will help you to handle property change event.
In Addition you should also set to the binded MaskedInput text property empty string. I made some changes in your sample code, which you could review in the below attached code snippets.
Regards, tsonevn. Thank you tsonevnThis works fine, but what about the case where the phone already has a value? For example, when I am loading the page, I am pre-populating some of the fields with customer's existing information.
In this case the viewModel. I have tested several options for above given scenario, however I was unable to find a temporary solution for bind text property of MaskInput view and to set existing value.
In regard to that I found that you have been logged an issue in the rope of this plugin. Possible solution you could be to use TextField and its keyboard type property. Thank you tsonevn for your help. While waiting for the module to be updated I am loading the value manually during the onLoaded event. This is not exactly databinding since I have to get the textfield by id, but it does the job for now.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.
If nothing happens, download GitHub Desktop and try again. If nothing happens, download Xcode and try again. If nothing happens, download the GitHub extension for Visual Studio and try again. For iOS. Falls back to the best platform-provided numeric keyboard on Android. Note that the iPad UI looks a bit sleeker than shown in the screenshot below.
Note that unless you use the decorate function this will not affect you bar some now-fixed UI glitches. Check out the demo to play with the keyboard. You can run it by typing npm run demo.
This plugin wraps a native keyboard library and extends a regular NativeScript TextField.
You can set any property you'd normally set on this widget classtextetc and a few plugin-specific properties as well. After adding the plugin you can add a namespace to your view using NumKey below and use the NumericKeyboardView tag to render a TextField powered by this plugin.
For comparison sake we kick off with the default appearance of a TextField and then showcase the various properties this plugin exposes:.
It's similar although a bit cleaner than in these screenshotsexcept for some padding on both sides of the keyboard:.
Check this registerElement exampleand this usage example. Now you can enhance the TextField with this plugin by doing fi. Skip to content. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.
Sign up. TypeScript Shell Ruby. TypeScript Branch: master. Find file. Sign in Sign up. Go back. Launching Xcode If nothing happens, download Xcode and try again. Latest commit Fetching latest commit…. Installation From the command prompt go to your app's root folder and execute: tns plugin add nativescript-numeric-keyboard Demo app Check out the demo to play with the keyboard.
Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. I can't seem to find any information or figure out how to set the keyboard type on a TextField for SwiftUI. It would also be nice to be able to enable the secure text property, to hide passwords etc. How to make TextField become first responder? If you want to set the contentType of an textField to eg.
Also works with keyboardType. We no longer need to use hacks.
Introducing the NativeScript Keyboard Toolbar Plugin
Beta 5 has brought a new modifier to set the keyboard type. For example, to use a number pad:. There's also autocapitalization and an EnvironmentValue disableAutocorrection. The keyboard type is set to. In the ContentView. Swift I created two TextFields. The data binding is the same so each will display the same text as it is entered. I'm the dev that answered that post - there's no official way to do so at the moment. To set TextField's keyboard type you need to add modifier.
Learn more. Ask Question.
Asked 10 months ago. Active 1 month ago. Viewed 9k times.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Already on GitHub? Sign in to your account. Can't this be solved with data bindings? This is the way I do "search-as-you-type". See this search. Docs: propertyChangeEvent. Well, that's about what I ended up with also to solve the issue.
However, sometimes you need to see that actual key press value. For example, I am working with a Bluetooth bar code scanner. It sends all of its data into the keyboard buffer it actually registers as a Bluetooth keyboard when you pair it. When it's done sending data it sends the tab character.
The tab character doesn't cause the data bound value to change, rather it causes the focus to change to the next control. There isn't a lost focus method or a key press listener for the TextField, so I had to hack it a bit by watching for my bound value to be a certain length.
It's not a good solution. Key listener may help implement "next button" handler. Excellent, thanks. One additional thought, most programming languages support key press listening, and also handling. So, if you mark that the event has been handled, it stops it from bubbling up to other listeners. Just a thought while you're looking into it. I will close this issue now.
If someone can invent a reasonable way to implement such a feature for both platforms, please reopen the issue and share your ideas. It's odd in deed that Android does not require onKeyListener to work with the soft keyboard, however, it is required to work with all physical keyboards.
Bluetooth scanners register themselves as keyboards. Therefore, the onKeyListener is still a quite useful method to implement. I don't develop for IOS natively, but I did find this article.
Here's the docs for how to do it on android. In iOS it is not that straight-forward to respond to a keyboard event and extract the key value. Generally, the suggested way is to handle the text change notifications of a UITextField instance and to respond to an action like "A text will be inserted at position, do something". On Android we have TextWatcher from api level 1.
The dark mode beta is finally here. Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. This behavior only happens on iOS and not on the Android version of the application.
I found an forum post about this type of issue happening with iOS in a NativeScript Vue application but I'm unsure how to use what they did to help me with Angular.
Playground: Playground version of app. Learn more. Asked 1 year ago. Active 1 year ago. Viewed 81 times. Can you share a Playground sample where the issue can be reproduced? Have you tried npmjs. That should fix the issue for you. Thanks, I'll give that a shot. I put it on NativeScript playground here: play. Active Oldest Votes. Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown.
The dark mode beta is finally here. Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. I have a registration form which contains several TextFields and other inputs. When a user taps one of the fields the Android soft keyboard will always show as expected. If I tap outside of the field though the keyboard does not hide.
Is there a way to capture this event so that I can hide the keyboard when ever a user taps outside of any of the inputs? But I'm unsure how to capture every tap event that blurs the forms inputs.
I'm not even sure if this is possible with Android. You can put the on tap listener to the parent view so that when you click on it anywhere outside textfieldit will clear the focus of the textfield that are showing keyboard. The way you are doing is to clear the focus of the container while it should be exactly the textfield:.
The dark mode beta is finally here.Fixing UITextField-Keyboard Problems (Swift in Xcode)
Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. In my Nativescript app, the application starts with the login page.
On iOS everything looks good, but on android, the username field is focused and the keyboard is showing. Is there a way to prevent this from happening? So I ended up implementing a different solution. This may not be the best approach, but it serves its purpose in my case and I wanted to share it for those of you that face a similar scenario. The key here is the setTimeout function Thanks Emil Oberg for pointing me to the right direction.
As far as I understand, here is what is happening:. At this point the page is loaded without any fields to be in focus and with the keyboard hidden. If the user taps any of the fields the keyboard will appear and they can proceed to log in as usual. As I mentioned, this may not be the best, or correct, approach, but works for me. Hope this can save someone the time to research the issue. I guess the username field is either textview or textfield.
If so, try this on loaded callback:. Learn more. Nativescript Android - hide keyboard Ask Question. Asked 3 years, 9 months ago. Active 3 years, 8 months ago. Viewed 3k times. So far I have tried: Getting a reference of another element a label and calling lbl. Is there another way to hide the keyboard when the page is loaded? Thank you. There is an open issue - github. You could also review the attached sample project in the repo.
I have been trying to use this code, but in my case it is not working. I am not sure why. Any ideas?