7

I have the following TextView:

<TextView id="textFieldBody" hint="Some hint" text="{{  }}" editable="true" class="TextField" returnKeyType="done" />

I'm trying to correctly implement it so that:

  • when the user presses "Done", the keyboard disappears
  • when the user touches outside (blur) of the TextView, the keyboard disappears
  • maybe when focus on the TextView, scroll up so that the rest of the view doesn't disappear behind the keyboard? (not sure yet about this one)

It's unclear to me how to achieve that. What kind of backend code do I need to implement?

Ideally, I'm looking for a solution that works for both iOS and Android.

Dailyrox
  • 427
  • 2
  • 4
  • 14
  • 1
    for hiding the keyboard you could use `dismissSoftInput` method -https://docs.nativescript.org/api-reference/classes/_ui_editable_text_base_.editabletextbase.html#dismisssoftinput . – Nikolay Tsonev Oct 26 '16 at 09:40
  • @NikolayTsonev thanks! I've seen that but I'm not sure how to implement it? I've added it like that: page.getViewById("textFieldBody").dismissSoftInput(); to my onLoaded function but it doesn't work. Pressing the done key returns to a new line. – Dailyrox Oct 26 '16 at 09:56
  • The blur effect has been resolved here: https://stackoverflow.com/q/39949110 – Aleksander Stelmaczonek Feb 13 '19 at 12:57

1 Answers1

16

When the user press done, keyboard disappears

For this one, you can put a listener to the textview so that it will get triggered when user press the done button. As I had a look at NativeScript API, this listener is only applied for TextField, but you can give TextView a try:

In XML:

<TextField returnPress="doneTap"/>

In .js file:

function doneTap(args) {
    var myTextField = args.object;
    myTextField.dismissSoftInput();
}
exports.doneTap = doneTap

When the user touches outside (blur) of the TextView, the keyboard disappears

For this one, you will put a listener to the parent view of the TextField. When you tap outside, it will invoke the function to hide the keyboard. The good thing is that this listener will be overrided by TextField tap. So when you tap on the TextField, the keyboard still shows up. You can find the answer here

When focus on the TextView, scroll up so that the rest of the view doesn't disappear behind the keyboard?

Using this plugin to prevent keyboard from covering the textfield

Community
  • 1
  • 1
Dean Le
  • 2,094
  • 13
  • 17