键盘隐藏在Ionic 3上的输入线

Question

由于Ionic v1，Ionic中有许多线程由于这个问题而打开。我已经阅读并研究了很多，但仍未找到解决此问题的明确解决方案。

好吧，我的问题就像许多其他人使用这个框架的问题一样。在这里：

我有一个包含大量输入行的页面（不要打扰所有NaN或零）：

现在，让我们想要编辑输入数字7.我会点击它，然后键盘弹出（我使用Chrome Inspect来获取打印，因此键盘没有出现，但你可以看到输入5 ，6和7被覆盖）：

然后，我输入一些内容：

轰隆！输入行正好出现在我想要的位置。现在，我的问题是：如何在我关注它的时候让输入线滚动到这个位置？这是否可能？

我在ion-col {position: initial !important;}的{​​{1}}上尝试了style="position: initial !important"和<ion-col>，但似乎没有任何效果。

如果您认为我的代码是必要的，我很乐意在这里发布，我现在不这样做，因为我不希望这篇文章太大。

感谢您的关注！

Answer 1

也许有点晚，但是我在Ionic4中遇到了同样的问题。我设法通过在单击离子输入元素时调用此方法来解决此问题：

public focusInput (event): void {

    let total = 0;
    let container = null;

    const _rec = (obj) => {

        total += obj.offsetTop;
        const par = obj.offsetParent;
        if (par && par.localName !== 'ion-content') {
            _rec(par);
        } else {
            container = par;
        }
    }
    _rec(event.target);
    container.scrollToPoint(0, total - 50, 400);
}

您可能需要调整if语句以适合您的代码。此方法的想法是递归计算到最上滚动元素（在这种情况下为ion-content）的偏移量，然后使用scrollToPoint()方法（Docs）向下滚动此距离。 / p>

希望这会有所帮助。