在键盘上隐藏选项卡

Question

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

我知道我只能去做" Adjudspan"，这就是这样，但是问题是，如果我这样做，键盘也隐藏了我聊天的输入，因为它是页脚。

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

我已经尝试使用[ngclass]在In，我使用键盘。

似乎没什么用。

我应该如何隐藏选项卡??

预先感谢您！

Answer 1

您必须添加一个EventListener以进行键盘交流以添加(或删除(某些CSS类中的某些CSS类。在Ionic1中，默认情况下，框架中添加了" hide-keyboard-open"类。在Ionic2中，您必须走"定制 - 实施路径"。因此，这是您要寻找的：

1(Ionic2文档中所述，安装键盘 - 拼写和node_modules：

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

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

2(将插件添加到您的app.modules.ts

3(在您的app.component.ts中添加带有设备就绪的事件的所需的EventLister：

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.scs.scss。

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

5(将类添加到所需元素，例如页脚，div或sth：

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

6(在这种情况下，将离子 - 脚标签放在内容标签中，否则在显示键盘时计算出的ViewHeight是不正确的。

祝您有美好的一天！

Answer 2

只需将以下行添加到您的config.xml ..

 <platform name="android">
<preference name="android- 
      manifest/application/activity/@android:windowSoftInputMode" 
   value="adjustPan" />
....
</platform>

这要修改Cordova将其写入您的AndroidManifest.xml的默认值，以控制应用程序的全局键盘输入行为。

Answer 3

您可以通过编写订阅键盘事件的指令，然后添加(hide(/removes(显示(css属性/class(display：none(一旦显示键盘/隐藏。

@Directive({
    selector: 'ion-tabs[hideTabs]',
})
export class HideTabsDirective implements OnDestroy {
    private static CSS_CLASS_NAME = 'hide-tab-bar';
    private show: Subscription;
    private hide: Subscription;
    constructor(element: ElementRef, renderer: Renderer, keyboard: Keyboard) {
        platform.ready().then(() => {
            this.show = keyboard.onKeyboardShow().subscribe(() =>
                renderer.setElementClass(element.nativeElement, 'hide-tabs', true)
            );
            this.onKeyboardHideSubscription = keyboard.onKeyboardHide().subscribe(() =>
                renderer.setElementClass(element.nativeElement, 'hide-tabs', false)
            );
        });
    }
    ngOnDestroy(): void {
        if (this.hide !== undefined) {
            this.hide.unsubscribe();
        }
        if (this.show !== undefined) {
            this.show.unsubscribe();
        }
    }
}

在app.scss中添加CSS类(例如(：

.hide-tabs {
display: none;
}

在您的标签元素上 <ion-tabs hideTabs> </ion-tabs>

**为概念证明添加代码