ionic-framework - 当键盘可见时,键盘隐藏页脚中的输入字段
问题描述
在我的 ionic 项目中,在聊天页面中,我在页脚部分包含了一个输入框,但是当键盘打开以输入不可见的输入框时。
聊天.html
<ion-footer>
<ion-toolbar>
<ion-grid>
<ion-row>
<ion-col col-10>
<ion-input type="text" placeholder="Type a message" [(ngModel)]="message" name="message"></ion-input>
</ion-col>
<ion-col col-2 (click)="sendMessage()">
<ion-icon name="paper-plane"></ion-icon>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
</ion-footer>
解决方案
使用它离子键盘插件
在终端:
ionic cordova plugin add ionic-plugin-keyboard
npm install --save @ionic-native/keyboard
加入:app.module.ts
import { Keyboard } from '@ionic-native/keyboard';
providers: [
...
Keyboard
...
]
在:chart.html
<ion-footer>
<ion-toolbar>
<ion-grid>
<ion-row>
<ion-col col-10>
<ion-input type="text" (focus)="showKeyboard()"
(focusout)="closeKeyboard()" placeholder="Type a message"
[(ngModel)]="message" name="message"></ion-input>
</ion-col>
<ion-col col-2 (click)="sendMessage()">
<ion-icon name="paper-plane"></ion-icon>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
</ion-footer>
在:chart.ts
import { Keyboard } from '@ionic-native/keyboard';
constructor(private keyboard: Keyboard) { }
showKeyboard() {
this.keyboard.show();
}
closeKeyboard() {
this.keyboard.close();
}
推荐阅读
- reactjs - ReactJS Material UI 在按钮单击时禁用其他选项卡
- java - 为什么不管是否抛出异常,这个测试都会成功?
- redux - Redux 工具包 actionCreator 警告:参数数量无效,应为 0
- javascript - 使用 Javascript 创建动态 ul
- mysql - 如何提高同表连接的性能?不知何故没有使用 1 个索引
- flutter - 如何将snackbar从一页调用到多页-flutter
- r - 重新聚合数据——从粗略到精细的时间分辨率
- heroku - 超出 Heroku slug 大小
- amazon-web-services - 无法从 AWS 获取身份验证令牌
- linux - 使用 eBPF 测量系统调用引起的 CPU 模式切换开销