Nativescript Vue关闭/隐藏Android键盘

时间:2019-06-04 06:32:12

标签: vue.js nativescript android-softkeyboard nativescript-vue

我在iOS上使用了出色的https://github.com/tjvantoll/nativescript-IQKeyboardManager,该按钮具有“完成”按钮(实际上是关闭按钮)。但是,对于Android软键盘而言,没有这种事情。所有隐藏键盘的解决方案都建议引用触发键盘的原始元素-不切实际的解决方案...

我在此论坛上找到了有关如何关闭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应该附加到外部/顶部元素-例如页面...。然后,在窗体域(TextField或TextView)外部单击时,键盘将被隐藏/关闭。

<Page @tap="dismissSoftKeybaord()">

以下是方便的混合代码:

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();
        }
      },
    }
};

我在布局方面确实存在一些问题,因为某些元素包装了其他元素,因此我不得不在一些地方应用dismissSofteyboard-但这确实可行。...

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

所以我现在只是想弄清楚如何调整布局,所以我不需要到处都用那么多的dismissSoftKeyboard @taps。...

0 个答案:

没有答案