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 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.

回答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:

<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

回答2:

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.

来源：https://stackoverflow.com/questions/39949110/hide-android-keyboard-in-nativescript-on-input-field-blur

标签

javascript

android

nativescript