ionic 4在键盘上方显示页脚 [英] ionic 4 show footer above the keyboard

问题描述

我的应用程序ionic 4中的键盘出现问题.显示键盘时，页脚中的文本框处于隐藏状态，这使得看不到该文本框中写的内容.

I have a problem with the keyboard in my application ionic 4. the text box in the footer is hidden when the keyboard is displayed, which makes it impossible to see what is written in the text box.

没有键盘

显示键盘时

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

thank you for proposing a solution to my problem

推荐答案

带电容器的Ionic 5的工作解决方案，通过在键盘事件上添加侦听器，我们可以切换整个ion-footer元素以向上或向下转换.请注意，translate3d keyboardHeight中的减号.

Working solution for Ionic 5 with capacitor, Adding listener on keyboard events, we can toggle the whole ion-footer element to transform up or down. Note the minus sign in translate3d keyboardHeight.

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');
    });
}

这篇关于ionic 4在键盘上方显示页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！