How to hide keyboard after touch outside the textfield?

Question

I have a cross-platform app. I have a form that has more than one TextField. I want to hide the keyboard when the user touch outside of the textfield because it covers the button that sends the data.

How can I do?

In my .html file I have:

<ScrollView>
  <GridLayout ios:style="margin-top:50">
    <StackLayout class="form">

      <!-- Some TextView -->

    </StackLayout>
  </GridLayout>
</ScrollView>

EDIT

This is a Playground that show the error.

Answer 1

Add a tap listener to your layout and hide keyboard using

iOS

import * as utils from "tns-core-modules/utils/utils";

UIApplication.sharedApplication
        .keyWindow
        .endEditing(true);

Android

utils.ad.dismissSoftInput();

Edit

You may simply call dismissSoftInput() method on the TextField if it's just one TextField in your Page. The above code helps if you have multiple TextFields on your Page and not sure which one is actually focused.

Playground Sample