屏幕键盘覆盖固定位置输入离子

Question

我正在尝试在离子中构建一个简单的消息传递视图。我的观点如下：

Initial screenshot

我的问题是当我将输入聚焦在iO上时，键盘会覆盖输入，但是在Android设备上，输入会随着出现的键盘一起移动。

我的理解是，如果我使用position：fixed并指示底部值（例如，bottom：16px），当键盘打开和不打开时，输入应该在页面上方16px处折叠。

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

On-screen keyboard covers up input

Answer 1

我在离子文本领域遇到了这个问题。我正在使用Ionic 4 Beta 17-Ionic Keyboard 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();
  });
}