在横向模式下，Ionic 3键盘隐藏输入字段

Question

我有一个必须处于横向模式的离子应用。当用户点击输入字段进行键入时，键盘会出现，因此用户只能看到页眉，页脚和键盘，因此用户无法看到他正在键入的内容。当我做同样的事情时，我在本机应用程序上看到，键盘出现了一个单独的文本框，这对我的Ionic应用程序来说非常完美。我怎么能在离子中做到这一点？以下是一些截图：

键入

之前的横向模式屏幕

键入时的屏幕

键入

时本机应用程序上的屏幕

Answer 1

尝试对IonicModule使用scrollAssist：true。

IonicModule.forRoot(MyApp, {
  scrollAssist: true
}),

Answer 2

我得到了它的工作。看起来解决此问题的唯一方法是在键盘显示时隐藏header和footer，并在键盘隐藏时显示header和footer。我还必须删除一些margins，以便专注的input位于顶部。这是我在app.component.ts中添加的代码：

keyboard.onKeyboardShow().subscribe(() => {

    let headers = document.querySelectorAll("ion-header"); //Get all headers
    headers[headers.length - 1].setAttribute("style", "display: none"); //Hide ACTIVE header

    let footers = document.querySelectorAll("ion-footer"); //Get all footers
    footers[footers.length - 1].setAttribute("style", "display: none"); //Hide ACTIVE footer

    let contents = document.querySelectorAll("ion-content"); //Get all content
    contents[contents.length - 1].querySelector("div.scroll-content").removeAttribute("style"); // Remove styling from content (margins)
  });

  keyboard.onKeyboardHide().subscribe(() => {
    let headers = document.querySelectorAll("ion-header"); //Get all headers
    headers[headers.length - 1].removeAttribute("style"); //Show ACTIVE header again

    let footers = document.querySelectorAll("ion-footer"); //Get all footers
    footers[footers.length - 1].removeAttribute("style"); //Show ACTIVE footer

    let contents = document.querySelectorAll("ion-content"); //Get all content
    contents[contents.length - 1].querySelector("div.scroll-content").setAttribute("style", "margin-top: 56px; margin-bottom: 56px;"); //Set styling again (margins)
  });