3

I'm using the excellent https://github.com/tjvantoll/nativescript-IQKeyboardManager on iOS, which has a 'done' button (effectively a close button). However, for Android softkeyboard there is no such thing... All the solutions to hide a keyboard suggest referencing the original element which triggered the keyboard - an impractical solution...

I found this forum post on how to dismiss a keyboard in nativeScript https://discourse.nativescript.org/t/unable-to-hide-keyboard/4129/9

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

// then as a method inside your vue

methods: {
dismissSoftKeybaord() {
  if (isIOS) {
    frame.topmost().nativeView.endEditing(true);
  }
  if (isAndroid) {
    utils.ad.dismissSoftInput();
  }
},

dimissSoftKeyboard should be attached to the outside / top element - eg page... Then, when clicking outside of a form field (TextField or TextView) the keyboard will be hidden / dismissed.

<Page @tap="dismissSoftKeybaord()">

Here is the code as a handy mixin:

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

export default {
methods: {
    dismissSoftKeybaord() {
        if (isIOS) {
          frame.topmost().nativeView.endEditing(true);
        }
        if (isAndroid) {
          utils.ad.dismissSoftInput();
        }
      },
    }
};

I do have a bit of an issue with layout, in that some elements wrap other elements so I've had to apply dismissSofteyboard in a few places - but it works....

<template>
  <Page class="page" statusBarStyle="dark" backgroundSpanUnderStatusBar="true">

    <ActionBar backgroundColor="#253945" color="#ffffff" flat="true" @tap="dismissSoftKeybaord()">
      <StackLayout orientation="horizontal">
        <Label ... />
      </StackLayout>
    </ActionBar>

      <GridLayout rows="*,60" @tap="dismissSoftKeybaord()">
        <ScrollView row="0" @tap="dismissSoftKeybaord()">
          <StackLayout class="logFormWrapper">

            <StackLayout class="input-field" marginBottom="20" >
              <TextField ... />
            </StackLayout>

            <StackLayout class="input-field" marginBottom="20">
              <TextField ...  />
            </StackLayout>
             ...
             ...
          </StackLayout>
        </ScrollView>

        <StackLayout margin="0" row="1" class="footer"></StackLayout>
      </GridLayout>

  </Page>
</template>

So I'm now just trying to figure out how I can adjust the layout so I don't need so many dismissSoftKeyboard @taps everywhere....

Rob
  • 1,576
  • 3
  • 22
  • 52
  • Most apps would hide keyboard upon scrolling, you might try that if it works for you. Or you may create a keyboard toolbar for Android and add a done button over there. – Manoj Jun 04 '19 at 07:09
  • Thanks. I looked into doing a keyboard toolbar with this plugin https://www.nativescript.org/blog/introducing-the-nativescript-keyboard-toolbar-plugin - but I'm using https://github.com/tjvantoll/nativescript-IQKeyboardManager already... it has its own toolbar with useful stuff. I ended up with two toolbars.... I could disable the iOS one - but then I'd lose the lovely features provided by the keyboard in iOS.... Unless there is a way to only target Android? – Rob Jun 04 '19 at 07:24
  • Yes, of course you could include the toolbar only for Android, that's exactly what I meant in my earlier comment. Simply include the KeyboardToolbar only if platform is Android, if you face any issues please describe. – Manoj Jun 04 '19 at 07:28
  • I'm using nativescript vue - I couldnt get that to work when I tried ealier. I shall try again :) Thanks! – Rob Jun 04 '19 at 07:29
  • Problem with that toolbar is - it only works if supplied with an ID... it means attaching an ID to every single text input... – Rob Jun 04 '19 at 07:56
  • If I remember correctly the keyboard in Android can be hidden with the back button which changes its orientation when it is open? – Bundyo Jun 04 '19 at 10:39
  • 1
    If you simply write a directive that can handle the whole toolbar logic, you wouldn't have to do all of this for each text field. – Manoj Jun 04 '19 at 10:45

0 Answers0