打开键盘时隐藏页脚 ionic4

2024-02-23

参考了这个链接:在键盘打开 Ionic3 上隐藏页脚 https://stackoverflow.com/questions/48386422/hide-footer-on-keyboard-open-ionic3

但问题也是一样的

问题与上图相同...我刚刚在页脚中添加了按钮...

.html 文件

<ion-content>
<textarea placeholder="Please leave your review"></textarea>
<ion-content>

<ion-footer>
<ion-button (click)="submit()">Submit</ion-button>
</ion-footer>

因此,当单击文本区域时,键盘将打开并且按钮出现在键盘上方。

我希望每当键盘打开时......页脚就会隐藏。


IONIC 4

Step:1您需要安装本机键盘插件才能使用键盘方法。您可以从安装它here https://ionicframework.com/docs/native/keyboard.

Step:2然后将其导入到 page.ts 文件中,如下所示

import { Keyboard } from '@ionic-native/keyboard/ngx';

Step:3然后将其放在 @Component 下的提供程序中

@Component({
providers: [Keyboard]
})

Step:4之后,在构造函数部分为类中的键盘创建一个构造函数。在 app.component.ts 文件中重复相同的步骤 2-4

constructor(public keyboard:Keyboard) {
  }

Step:5然后在页面加载时使用一个变量默认隐藏键盘,就像在您的类中一样:

isKeyboardHide=true;

Step:6之后,您只需在 ionWillEnter 方法中调用键盘的默认方法,并在显示时将变量值设置为 false 以显示键盘。

ionViewWillEnter() {
    this.keyboard.onKeyboardWillShow().subscribe(()=>{
      this.isKeyboardHide=false;
      // console.log('SHOWK');
    });

    this.keyboard.onKeyboardWillHide().subscribe(()=>{
      this.isKeyboardHide=true;
      // console.log('HIDEK');
    });
  }

Step:7相应地隐藏和显示底部 div 或页脚。

//// FOR DIV BOTTOM DIV////
    <div class="" *ngIf="isKeyboardHide">
    </div>
//// OR FOR FOOTER ////
    <ion-content></ion-content>

    <ion-footer *ngIf="isKeyboardHide">
    </ion-footer>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

打开键盘时隐藏页脚 ionic4 的相关文章

随机推荐