ionic 4 在键盘上方显示页脚答案

【问题标题】：ionic 4 show footer above the keyboardionic 4 在键盘上方显示页脚
【发布时间】：2023-03-22 12:08:01
【问题描述】：

我的应用程序 ionic 4 中的键盘有问题。显示键盘时，页脚中的文本框被隐藏，因此无法看到文本框中的内容。

without keyboard

when the keyboard is displayed

感谢您为我的问题提出解决方案

【问题讨论】：

请分享您的标记
我已经在帖子中添加了页脚代码

标签： angular ionic-framework

【解决方案1】：

我很确定您的应用程序处于全屏模式，如果是这样，请移除全屏模式，因为它不支持 ionic 4 页脚输入。

【讨论】：

我删除了 config.xml 上的全屏模式，但我已经遇到了同样的错误
不要忘记将键盘设置为离子。
怎么办？因为我尝试了很多解决方案但没有成功
像 superbar 这样的东西会妨碍其他插件

【解决方案2】：

您是否尝试过使用普通的<input type="text"> 而不是<ion-input type="text">。在 ionic 3 上，这对我来说很容易解决。

【讨论】：

我试过这个解决方案，但我遇到了一个错误...... {模板解析错误：无效元素没有结束标签“input”（“-toolbar> [ERROR ->]

【解决方案3】：

带电容器的 Ionic 5 的工作解决方案，在键盘事件上添加监听器，我们可以切换整个 ion-footer 元素来向上或向下变换。注意 translate3d 键盘高度中的减号。

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

@ViewChild(IonFooter, { read: ElementRef }) private inputTextArea: ElementRef

  ionViewDidEnter() {

    Keyboard.addListener('keyboardDidShow', (info: KeyboardInfo) => {
      console.log('keyboard will show with height', info.keyboardHeight);
      this.inputTextArea.nativeElement.style.setProperty(
        'transform',
        `translate3d(0, -${info.keyboardHeight}px, 0)`
      );
    });

    Keyboard.addListener('keyboardDidHide', () => {
      console.log('keyboard did hide');
      this.inputTextArea.nativeElement.style.removeProperty('transform');
    });
}

【讨论】：