透过现象看本质

在移动端项目中，有时候会存在用户输入框，当用户点击输入框的时候，一般系统会自下而上弹出输入法软键盘，而这个时候页面高度会被挤压，但内部内容一般不会有太大变化(脱离文档流的除外)，而这个时候如果用户点击的输入框偏向于底部的话，则会出现输入框被隐藏情况。

整个过程，我们发现页面布局被改变了，也就是软键盘弹出触发了window.onresize事件，但被用户点击的输入框并没有始终置于可视区域，也就是没有调用该输入框相关回调(将其始终置于可视区域)。

解决办法

1.页面布局问题

当页面进行初始化渲染的时候，我们可以获取到当前整个的页面高度，那么这个时候我们只需要对其进行页面最小高度设置，则当软键盘弹出触发了window.onresize事件的时候，页面布局将不会有所改变。

window.onload = function() {
    var html = document.getElementsByTagName('html')[0];
    html.style.minHeight = html.clientHeight + 'px';
}

2.输入框被隐藏

当我们做了上述操作1，那么在安卓系统中，一般情况下，系统会将被用户激活了的输入框置于可视区域， 但在IOS系统中，该系统则不会自动将其置于可视区域，这个时候就需要我们主动并始终将被用户激活了的输入框置于可视区域，我们需要进行如下操作：

window.onload = function() {
    var input = document.getElementById('input'), timer;
    input.addEventListener('focus', function(e) {
        timer = setInterval(() => {
          input.scrollIntoView(false);
        }, 200)
    }, false)
    input.addEventListener('blur', function(e) {
        clearInterval(timer);
        timer = null;
    }, false)
}