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

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

作者: microkof | 来源:发表于2017-02-26 12:14 被阅读165次

    起因

    移动端在不做任何处理的前提下,输入框呼出输入法,输入法会遮挡住将近一半的网页面积,经常会把输入框自身也遮挡住,这个问题,我查了很多资料,可以说解决方案不下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();
    储存初始视口高度

    相关文章

      网友评论

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

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