ionic4 - 打开键盘时隐藏页脚
问题描述
参考这个链接: 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>
因此,当单击 textarea 时,键盘会打开,并且按钮会出现在键盘上方。
我希望每当键盘打开时......页脚就会隐藏起来。
解决方案
离子 4
步骤:1您需要安装本机键盘插件才能使用键盘方法。您可以从这里安装它。
步骤:2然后像这样将它导入到您的 page.ts 文件中
import { Keyboard } from '@ionic-native/keyboard/ngx';
步骤:3然后将其放在@Component下的提供者中
@Component({
providers: [Keyboard]
})
步骤:4之后,在构造函数部分的类中为键盘创建一个构造函数。在 app.component.ts 文件中重复相同的步骤 2-4
constructor(public keyboard:Keyboard) {
}
步骤:5然后在您的班级中使用一个变量来默认在页面加载时隐藏键盘:
isKeyboardHide=true;
步骤:6之后,您需要在 ionWillEnter 方法中调用键盘的默认方法,并在显示时将变量值设置为 false 以显示键盘。
ionViewWillEnter() {
this.keyboard.onKeyboardWillShow().subscribe(()=>{
this.isKeyboardHide=false;
// console.log('SHOWK');
});
this.keyboard.onKeyboardWillHide().subscribe(()=>{
this.isKeyboardHide=true;
// console.log('HIDEK');
});
}
步骤:7相应地隐藏和显示底部 div 或页脚。
//// FOR DIV BOTTOM DIV////
<div class="" *ngIf="isKeyboardHide">
</div>
//// OR FOR FOOTER ////
<ion-content></ion-content>
<ion-footer *ngIf="isKeyboardHide">
</ion-footer>
推荐阅读
- git - 克隆远程存储库时遇到错误:Git failed with a fatal error
- javascript - Ant Design 添加纯文本菜单项
- sql - 如何向 Azure SQL 数据库中的用户授予数据库范围凭据
- python-3.x - 在设计神经网络模型时无法将字符串转换为浮点数
- macos - 如何将新文件夹图标设置为 Volumes 文件夹
- phaser-framework - Phaser 3 - 未解析的方法图形
- html - 创建一个带有文本的边框
- oracle - 在 oracle apex 中加载页面时以表格形式显示多行
- javascript - 如何在我的 React + Redux 应用程序中集成 Reselect?
- python - 如果即时监控的产品有货,如何让 Twilio 给我发短信