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>