H5移动端网页输入法弹出时页面不自动滚动

2016-11-06

手机网页开发中，遇到点击输入框(input,textarea)时，输入法弹出但页面不自动向上滚动，搜索发现微信的UI框架weui中的解决办法：

// .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug
// 相关 issue: https://github.com/weui/weui/issues/15
// 解决方法:
// 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题
// 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element
//    Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把
if (/Android/gi.test(navigator.userAgent)) {
    window.addEventListener('resize', function () {
        if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
            window.setTimeout(function () {
                document.activeElement.scrollIntoViewIfNeeded();
            }, 0);
        }
    })
}

weui地址：http://weui.github.io/weui/example.js

备注：

目前我只在Android下测试发现此问题，网上有提到iOS手机使用默认输入法时是OK的，但是使用第三方的输入法可能会存在问题，暂时没有解决办法！