屏幕键盘涵盖离子中的固定位置输入答案

【问题标题】：On-screen keyboard covers fixed position input in ionic屏幕键盘涵盖离子中的固定位置输入
【发布时间】：2018-12-08 07:52:19
【问题描述】：

我正在尝试在 ionic 中构建一个简单的消息传递视图。我的看法如下：

Initial screenshot

我的问题是，当我将输入集中在 iO 上时，键盘会覆盖输入，但是在 Android 设备上，输入会随着出现的键盘按预期移动。

我的理解是，如果我使用位置：固定并指示底部值（例如，底部：16 像素），无论键盘打开还是未打开，输入都应显示在页面折叠上方 16 像素。

作为参考，这是我尝试将输入集中在实际 iOs 设备上时得到的结果。

On-screen keyboard covers up input

【问题讨论】：

标签： ios css angular ionic-framework

【解决方案1】：

我在使用 ion-textarea 时遇到了这个问题。我正在使用 ionic 4 beta 17 - 离子键盘 2.1.3 我仍然没有使用本机键盘，但也许会尝试。我所做的是连接keyboardDidShow 事件并将活动文档滚动到视图中。看这段代码：

ngOnInit() {
  window.addEventListener('keyboardDidShow', () => {
    const el = document.getElementById('myElement'); 
//myElement would be the input you have. Or you can just scroll into view the active element, like
// document.activeElement.scrollIntoView();
    if (document.activeElement === el)
      el.scrollIntoView();
  });
}

【讨论】：