美文网首页AndroidH5
html5手机网页开发,中文输入法下软键盘遮挡输入框

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

作者: mujiaxiansheng | 来源:发表于2016-04-28 14:23 被阅读7490次

    最近在开发手机网页是遇到手机输入框获取焦点是软键盘遮挡输入框的问题,如下:
    问题1、测试几款安卓机,当软键盘弹出后页面无法滚动
    问题2、iphone(5c,6,6 plus)手机获取焦点时,手机会有部分滚动
    问题3、iphone(5c,6,6 plus)使用手机默认输入法,手机会自动滚动

    安卓手机解决办法

    微信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个)还是会出现此问题,再是没找到好的方法

    相关文章

      网友评论

      • ffc88f6431fa:我的小米手4s,android7.0系统,为什么调用resize没反应的?
        mujiaxiansheng:那就不知道了,不过小米手机的确比较坑。

      本文标题:html5手机网页开发,中文输入法下软键盘遮挡输入框

      本文链接:https://www.haomeiwen.com/subject/crkhrttx.html