Hide Android Keyboard In Nativescript On Input Field Blur

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 o

Solution 1:

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:

<Pagexmlns="http://schemas.nativescript.org/tns.xsd"navigatingTo="onNavigatingTo"><StackLayouttap="clearTextfieldFocus"><Labeltext="Tap the button"class="title"/><Labeltext="{{ message }}"class="message"textWrap="true"/><TextFieldid="myTextfield"hint="Type here..."/></StackLayout></Page>

In page.js:

functionclearTextfieldFocus(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

Solution 2:

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";


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

Solution 3:

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.