移动端输入法遮挡输入框问题的解决方案(无效)

起因

移动端在不做任何处理的前提下,输入框呼出输入法,输入法会遮挡住将近一半的网页面积,经常会把输入框自身也遮挡住,这个问题,我查了很多资料,可以说解决方案不下10种,但是往往理解起来比较困难,所以干脆自己写一种。

代码

// 首先判断浏览器是否移动浏览器,方法任意,只要能准确判断出来即可
// 我是用的device.js
// 另外我引入了jQuery
if ($('html.mobile').length) {
    var initialHeight = $(window).height();
    $('.covered-input-box').on('focus', function () {
        $("body").height($(window).height());
    }).on('blur', function() {
        setTimeout(function () {
            $("body").height(initialHeight);
        }, 0);
    });
}

稍作解释

var initialHeight = $(window).height();
储存初始视口高度

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容