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

时间:2018-05-09 07:53:40

标签: android angular ionic-framework ionic3

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

键入

之前的横向模式屏幕

enter image description here

键入时的屏幕

enter image description here

键入

时本机应用程序上的屏幕

enter image description here

2 个答案:

答案 0 :(得分:0)

尝试对IonicModule使用scrollAssist:true。

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

答案 1 :(得分:0)

我得到了它的工作。看起来解决此问题的唯一方法是在键盘显示时隐藏headerfooter,并在键盘隐藏时显示headerfooter。我还必须删除一些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)
  });