美文网首页
解决IOS safari在input focus弹出输入法时不支

解决IOS safari在input focus弹出输入法时不支

作者: 迪丽迪丽 | 来源:发表于2017-09-28 21:32 被阅读0次

    我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部。但在IOS的safari和webview中,对position:fixed的支持不是很好(在IOS5之前甚至还不支持position:fixed)。我遇到的其中一个问题就是,在iOS6+环境下,input focus弹出输入法的时候,设置了position fixed的input框浮在页面上了,而不是吸附在软键盘上。

    解决方案:

    基于zepto的主要代码实现如下:

    $('input').focus(function(){

    var _this = this;

    //无键盘时输入框到浏览器窗口顶部距离

    var noInputViewHeight = $(window).height() - $(_this).height();

    //网页正文内容高度

    var contentHeight = $(document).height() - $(_this).height();

    //控制正文内容高度大于一屏,保证输入框固定底部

    contentHeight = contentHeight > noInputViewHeight ? contentHeight : noInputViewHeight;

    //因为弹出输入法需要时间,需延时处理

    setTimeout(function(){

    //弹出输入法时滚动条的起始滚动距离

    var startScrollY = $(window).scrollTop();

    //弹出输入法时输入框到窗口顶部的距离,即到软键盘顶部的起始距离

    var inputTopHeight = $(_this).offset().top - startScrollY;

    //弹出输入法时输入框预期位置,即紧贴软键盘时的位置。因输入框此时处于居中状态,所以其到窗口顶部距离即为需往下移动的距离。

    var inputTopPos = $(_this).offset().top + inputTopHeight;

    //控制div不超出正文范围

    inputTopPos = inputTopPos > contentHeight ? contentHeight : inputTopPos;

    //设置输入框位置使其紧贴输入框

    $(_this).css({'position':'absolute', 'top':inputTopPos });

    //给窗口对象绑定滚动事件,保证页面滚动时div能吸附软键盘

    $(window).bind('scroll', function(){

    //表示此时有软键盘存在,输入框浮在页面上了

    if (inputTopHeight != noInputViewHeight) {

    //页面滑动后,输入框需跟随移动的距离

    var offset = $(this).scrollTop() - startScrollY;

    //输入框移动后位置

    afterScrollTopPos = inputTopPos + offset;

    //设置输入框位置使其紧贴输入框

    $(_this).css({'position':'absolute', 'top':afterScrollTopPos });

    }

    });

    }, 100);

    }).blur(function(){//输入框失焦后还原初始状态

    $(".div-input").removeAttr('style');

    $(window).unbind('scroll');

    });

    相关文章

      网友评论

          本文标题:解决IOS safari在input focus弹出输入法时不支

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