Question

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

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

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

我已经尝试过使用[ngClass]，我尝试使用Keyboard.disableScroll，也使用参数scrollAssist和autoFocusAssist使用false值...在app.module.ts中尝试...

似乎没什么用。

我应该怎样隐藏标签？

提前谢谢!!

Answer 1

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

1）按照ionic2 docs：

中的描述安装keyboard-plugin和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中的设备就绪事件中添加所需的事件列表：

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）使用附加的class-attribute（hideElementOnKeyboardShown）将类定义添加到app.scss

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

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

<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中，否则在显示键盘时计算的视图高度不正确。

度过愉快的一天！

Answer 2

只需将以下几行添加到您的config.xml中即可。

 <platform name="android">

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

....
</platform>

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

Answer 3

您可以通过编写一个订阅Keyboard事件的指令来实现这一点，然后在显示/隐藏键盘后，向tab元素添加（隐藏）/删除（显示）css属性/类（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>

上的

为了概念验证而添加了**代码

隐藏键盘上的标签打开

3 个答案: