Hide Android keyboard in Nativescript on input field blur

Question

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?

It looks like doing the following allows me to hide the keyboard

var pageContainer = page.getViewById('registration-container');
if(pageContainer.android) {
    pageContainer.android.clearFocus();
}

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.

score 6 · Accepted Answer · answered Oct 10 '16 at 07:05

6

You can put the on tap listener to the parent view so that when you click on it (anywhere outside textfield), it 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:

In XML:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
    <StackLayout tap="clearTextfieldFocus">
        <Label text="Tap the button" class="title"/>
        <Label text="{{ message }}" class="message" textWrap="true"/>
        <TextField id="myTextfield" hint="Type here..."/>
    </StackLayout>
</Page>

In page.js:

function clearTextfieldFocus(args) {
    var layout = args.object;
    var myTextfield = layout.getViewById("myTextfield");
    myTextfield.android.clearFocus();
}
exports.clearTextfieldFocus = clearTextfieldFocus;

P/s: the tap listener on the textfield will override the parent listener, so clicking on textfield still focus and show keyboard

answered Oct 10 '16 at 07:05

Dean Le

2,094
13
17

Ok your PS is what I wasn't sure about when I was thinking about this. I'll give this a shot. Thanks – Stavros_S Oct 10 '16 at 12:55
would I need to add a clear focus for each textfield with in Layout? – Stavros_S Oct 10 '16 at 14:54
Any ideas on what to do if you have a page with multiple textfields that don't have ids because they are dynamically added inside of an *ngFor and *ngIfs... would I need to dynamically set the ids of each added textfield and then in the clearTextfieldFocus function loop through all the textFields calling clearfocus()? Seems cumbersome to keep track of them all. – apricity Sep 12 '17 at 18:47
I have not developed NativeScript for a while but as I remember, there is a method for a container to get all the child views. How about iterating over those child views and clear focus each of them? https://docs.nativescript.org/api-reference/classes/_ui_layouts_layout_base_.layoutbase.html#eachchildview – Dean Le Sep 13 '17 at 06:44
I also tried this but does not worked for me. Any other solution? – Deep Jan 17 '19 at 09:24

score 4 · Answer 2 · answered Feb 17 '20 at 19:27

I found this to be more elegant:

import * as utils from "tns-core-modules/utils/utils";
import { isIOS, isAndroid } from "tns-core-modules/platform";
import { frame } from "tns-core-modules/ui/frame";


export function hideKeyboard() {
    if (isIOS) {
        frame.topmost().nativeView.endEditing(true); 
    } 
    if (isAndroid) {
        utils.ad.dismissSoftInput(); 
    } 
}

score 1 · Answer 3 · answered Feb 13 '19 at 12:36

1

This is what has worked for me:

event.object.dismissSoftInput()

In case of Vue you end up with:

<TextView v-model="textData"
          @blur="$event.object.dismissSoftInput()"
          editable="true"/>

Documentation can be found here.

answered Feb 13 '19 at 12:36

Aleksander Stelmaczonek

1,350
1
22
29

Hide Android keyboard in Nativescript on input field blur

3 Answers3

Linked