H5 手机端键盘 有可能 挡住输入框的解决方法
发布在不积跬步无以至千里2016年3月23日view:3337HTML5JavaScript移动开发前端工程
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

目前在apple手机上面没发现问题,还是我大apple牛鼻啊!

Android手机却不行,也不是说Android手机完全有问题,之后键盘出来之后,页面向上滑动的距离太短,用户体验性不太好。

目前我的解决方案:

   (1) 输入框获取交焦点之后,使用定时器循环判断浏览器可视窗口的大小,然后设置整个页面的滚动距离。
   (2)给浏览器添加resize事件,然后判断输入框时候获取当前页面的焦点,
目前我是使用第一种方法来处理的!代码如下:  
 $('input').on('focus', function() {
                    var h = this.offsetHeight,
                        t = this.offsetTop;
                    var timer = setInterval(function() {
                        var hs2 = document.documentElement.clientHeight || document.body.clientHeight;
                        var tH = window.scrollY;
                        if (isAndroid && hScreen>hs2) {
                                //使用原生
                                // document.body.scrollTop = hScreen - hs2;
                                // document.documentElement.scrollTop = hScreen - hs2;
                                // 使用zepto.js库
                                $(document).scrollTop(hScreen - hs2);
                                clearInterval(timer);
                        }
                    }, 100)
                })
评论
发表评论
1年前
添加了一枚【评注】:th变量代码没用到?
1年前

以前没做过移动端前端,真的学了第三天,做东西的时候遇到的问题,仅供参考!大家有其他更好的方法请赐教!

PUBLISHED IN
不积跬步无以至千里

前端知识积累,填坑,掉坑中。。。

我的收藏