美文网首页
移动端软键盘遮挡住页面(二)

移动端软键盘遮挡住页面(二)

作者: yyshang | 来源:发表于2017-01-10 16:38 被阅读127次

接着上一篇的移动端软盘遮挡页面后有想到了一个更为简单的解决方案:
让页面长一点,或者用脱离文档流的定位,这样键盘弹出来时,输入框会自动上滑。
还有种解决方案:在没有定位的情况下,解决输入框被手机键盘挡住时,可以参考:

var loaclHeight = $("section").height(); //获取可视宽度 
$("input,textarea").focus(function() {
 var keyboardHeight = localHeight - $("section").height();  //获取键盘的高度 
var keyboardY = localHeight - keyboardHeight;
 var addBottom = (parseInt($(this).position().top) + parseInt($(this).height()));//文本域的底部 
var offset = addBottom - keyboardY;//计算上滑的距离 
$("section").scrollTop(offset); });

ok就这样了
还有个方法
通过 window.onresize 监听页面大小变化,然后通过 window.scrollTo 使页面滚动到所需位置
页面不存在滑动(通过overflow设为hidden的方式),所以在点击input标签输入信息时,在安卓机下键盘会遮挡页面底部内容,当点击键盘时,焦点所在的 input标签才会显示在视区里。在IOS不存在此问题(在软键盘弹出时,页面会自动顶上去),存在滑动的页面里也不存在该问题。

window.onresize = function () {
    if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
        setTimeout(function () {
            var top = document.activeElement.getBoundingClientRect().top;
            window.scrollTo(0,top);
        }, 0);
    }
}

相关文章

网友评论

      本文标题:移动端软键盘遮挡住页面(二)

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