隐藏键盘打开时的标签 [英] Hide tabs on keyboard open

问题描述

我想在键盘打开时隐藏我的标签，并在键盘关闭时再次显示标签。

I want to hide my tabs when the keyboard is open, and show the tabs again when the keyboard is closed.

我知道我可以只为 AdjustSpan，就是这样，但问题是，如果我这样做，键盘也隐藏了我的聊天输入，因为它是一个页脚。

I know that I can go just for "AdjustSpan", and thats it, but the problem is that if I do that, the keyboard also hides an input that I have for a chat, because its a footer.

什么是隐藏标签的最佳方法？

Whats the best way to hide the tabs?

我已经尝试过使用[ngClass]，我尝试使用Keyboard.disableScroll，也使用了app.module.ts参数scrollAssist和autoFocusAssist带有假值......

I already tried with [ngClass] in , I tried with Keyboard.disableScroll, and also in app.module.ts using the parameters scrollAssist and autoFocusAssist with false value...

似乎没什么用。

任何想法应该怎么做我隐藏标签??

Any idea of how should I hide the tabs??

提前谢谢!!

推荐答案

您必须为键盘交互添加一个eventlistener，以将一些css类添加（或删除）到body-tag。在ionic1中，默认情况下从框架中添加了hide-on-keyboard-open类。在ionic2中，你必须走自定义实现路径。那么，这就是你要找的东西：

You have to add an eventlistener for keyboard-interaction to add (or remove) some css class to the body-tag. In ionic1 the class "hide-on-keyboard-open" was added by default from the framework. In ionic2 you have to walk the "custom-implementation-path". So, here is what you are looking for:

1）按照ionic2 docs中的描述安装keyboard-plugin和node_modules：

1) Install keyboard-plugin and node_modules as described in ionic2 docs:

ionic plugin add ionic-plugin-keyboard
npm install --save @ionic-native/keyboard

https://ionicframework.com/docs / native / keyboard /

2）将插件添加到app.modules.ts

2) Add the plugin to your app.modules.ts

3）在app.component.ts中的设备就绪事件中添加所需的事件列表：

3) Add the desired eventlister withiin the device-ready event in your app.component.ts:

this.platform.ready().then(() => {

        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
        this.statusBar.styleDefault();

        this.keyboard.onKeyboardShow().subscribe(() => {
            document.body.classList.add('keyboard-is-open');
        });

        this.keyboard.onKeyboardHide().subscribe(() => {
            document.body.classList.remove('keyboard-is-open');
        });
})

4）将类定义添加到app.scss并附加一个类-attribute（hideElementOnKeyboardShown）

4) Add the class defintion to your app.scss with a additional class-attribute (hideElementOnKeyboardShown)

body.keyboard-is-open .hideElementOnKeyboardShown{
    display: none;        
}

5）将类添加到所需元素，例如页脚，div或别的：

5) Add the class to the desired element, eg an footer, div or sth else:

<ion-footer class="hideElementOnKeyboardShown">
    <button round ion-button (click)="onLogin()"  block>
        <ion-icon name="logo-facebook" padding></ion-icon>
            Login
    </button>
</ion-footer>

6）在这种情况下，将ion-footer标签放在content-tag中，否则计算出来键盘显示时，viewheight不正确。

6) in this case, put the ion-footer tag within the content-tag, otherwise the calculated viewheight isnt correct when keyboard is shown.

祝你有愉快的一天！

这篇关于隐藏键盘打开时的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！