时间戳

首页 > 解决方案 > 键盘隐藏输入 - Ionic 5

angular - 键盘隐藏输入 - Ionic 5

问题描述

我用 Ionic 5 / angular 制作的应用程序有问题。发生的情况是，当我专注于输入时，键盘会抬起并覆盖选定的输入。有没有办法通过使其自动滚动直到键盘位于所选输入下方来避免这种行为？

输入/键盘IMG

标签： angularionic-frameworkangular-materialionic4ionic-native

解决方案

如果您使用的是cordova，您可以设置当软键盘出现时 UI 会发生什么（“ adjustResize ”或“ adjustPan ”）。

为此，在里面config.xml，添加一个<edit-config>标签<platform name="android">

<edit-config file="AndroidManifest.xml" target="/manifest/application/activity[@android:name='MainActivity']" mode="merge">
        <activity android:windowSoftInputMode="adjustPan" />
</edit-config>

确保在<widget>标签中添加 android-res 命名空间：

<widget xmlns:android="http://schemas.android.com/apk/res/android" .....>

对于电容器应用：

使用 Keyboard API 的setResizeMode()方法在键盘出现时调整 UI。

在 app.component.ts 中：

import { Plugins, KeyboardInfo } from '@capacitor/core';

const { Keyboard } = Plugins;

...

Keyboard.setResizeMode({mode:'ionic'});

对于其他支持的模式，请查看https://capacitorjs.com/docs/apis/keyboard#keyboard-configuration-ios-only

推荐阅读