H5页面解决移动端输入框键盘弹起背景图

最新推荐文章于 2023-03-20 17:59:29 发布

落千

最新推荐文章于 2023-03-20 17:59:29 发布

阅读量944

点赞数

分类专栏： JavaScript 文章标签： JavaScript 键盘监听背景图布局调整移动设备

本文链接：https://blog.csdn.net/zm_960911/article/details/125085259

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

解决原理：键盘弹出时，设置背景图下移；键盘关闭时，设置背景图复原

背景图的css

.login-bg img{
  width: 100%;
  object-fit:cover;
  position: fixed;
  bottom: 0;
}

页面添加js监听事件

$(function () {
        //控制手机输入法弹出时,页面不会被顶起
        var height = document.documentElement.clientHeight || document.body.clientHeight;
        window.onresize = function() {
            var heightView = document.documentElement.clientHeight || document.body.clientHeight;
            console.log(heightView,height)
            //height是页面原始高度，heightView 是当前页面可视高度
            if(heightView < height) {
            	//键盘弹出时
                $('.login-bg img').css('bottom',heightView-height+'px')
                console.log('下移')
            }else {
            	//键盘收起时
                $('.login-bg img').css('bottom','0px')
                console.log('复原')
            }
        }
    })