移动端，点击input，软键盘弹起后，input框看不到，怎么解决?

问题与解决

这个问题我目前的理解是需要分情况讨论：

1、input的容器能滚动，并且这个容器没有给一个固定的高（而是用calc进行计算），这样就会导致软键盘弹起时，页面压缩，留给容器的高度就没有了，这样就看不到input了。（虽然看不到input，但是能输入，如果输入123，input显示结果却是321，那多半就是情况1了。）

        解决办法就是给容器一个固定高度或者使用min-height。这样就应该能确保在软键盘弹起时，能给容器留一些高度。

2、如果容器中的input有多个，则可能会出现点击最后一个input，但是软键盘弹起后点击的这个input会看不到，反而是滚动到了倒数第三个input(这是举例，一般都是滚动到点击的那个input上面)。

        监听resize事件时，发现软键盘弹起时会执行3次resize，按理讲应该只会执行一次。所以我觉得第一次resize时，点击的那个input滚动的位置应该是正常的，后面不明原因（浏览器可能是地址栏导致的）导致可视区域的高度变化，从而又向上滚动一段距离，最终你点击的input就看不到了。

        解决办法是监听resize事件，在事件回调中获取聚焦元素（input），使其能完全滚动到可视

区域中。(这是问的ai，哈哈哈)

window.addEventListener('resize', function() {
    var focusedElement = document.activeElement;
    if (focusedElement.tagName === 'INPUT' || focusedElement.tagName === 'TEXTAREA') {
        setTimeout(function() {
            focusedElement.scrollIntoView();
        }, 0);
    }
});

总结

        一般安卓的机子有这个问题，还有多问ai。