html5手机网页开发，中文输入法下软键盘遮挡输入框

安卓手机解决办法

微信UI框架weui中给出了解决方法：
weui框架
http://weui.github.io/weui/example.js

　　 // .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);
            }
        })
    }

 

iphone手机解决方法

1、用手机自带输入法的情况下不会出现此问题
2、手机安装搜狗输入法，百度输入法（只测过这2个）还是会出现此问题，再是没找到好的方法

 

支持浏览器如下：

详情：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded

原文链接： http://www.jianshu.com/p/98a662d97580

转载于:https://www.cnblogs.com/liulinjie/p/11264855.html