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

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 更改为全屏。