离子大模式检测键盘是否打开

Question

我想增加模式的大小，但在键盘打开时仍保持全屏模式的功能。

我尝试使用下面的代码设置宽度。

.modal-xxl .modal-wrapper {
  --width: 94vw;
  --height: 94vh;
}

这很好，直到我开始在模态上使用一些输入并打开键盘。因此，模态的大小保持94vw的宽度，但是我希望模态能够像正常行为一样宽100％。

我没有找到任何表明键盘处于打开状态的类，但我知道应该存在。模态默认情况下具有一些边界半径，但是当键盘打开时，该默认半径消失（边界半径== 0px）。

有人知道哪个类别表明键盘已打开吗？

Answer 1

我不认为打开键盘时会应用特定的CSS类。

我正在做一个类似的应用程序，当显示键盘时，我隐藏了工具栏。要检测键盘是否可见，我正在使用以下插件：https://ionicframework.com/docs/native/keyboard

一旦安装，您只需要在构造函数中引用它：

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

constructor(public keyboard: Keyboard) { }

并且您可以在HTML中使用keyboard.isVisible属性。

我自己还没有尝试过，但是对于您的用例，您可以尝试将ngClass应用于模式视图的包装器（例如ion-app：）：

<ion-app [ngClass]="{'global-keyboard-opened': keyboard.isVisible}">

并且在存在此类的情况下将模式包装器css更改为全屏。