JQ兼容安卓和ios弹出系统键盘影响布局

最新推荐文章于 2023-02-18 17:26:23 发布

manny-liu

最新推荐文章于 2023-02-18 17:26:23 发布

阅读量609

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JQuery 文章标签： onresize

本文链接：https://blog.youkuaiyun.com/manmanwei/article/details/89963711

JQuery 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了在网页中遇到的问题，当在安卓或iOS设备上调起系统键盘时，固定定位的底部按钮栏被键盘遮挡。文章通过提供部分页面布局和样式代码，展示了期望的布局效果，并描述了在安卓设备上出现的问题。为解决这个问题，文章提及在onresize事件中调整.btn-list的定位方式，以确保在键盘弹出时，底部按钮栏能保持在页面底部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用场景

页面底部有一行按钮栏，固定在窗口底部，即定位是position: fixed。当调起系统键盘时，底部按钮栏却在键盘上面，而希望的效果是底部按钮栏仍然在底部。同时解决当浏览器宽高发生变化时，多次触发onresize事件，只标记一次有效。
想象中的样式是这样的：
在这里插入图片描述但是在安卓上，当输入手机号码唤起系统键盘时，按钮栏被顶到键盘上面了。大屏幕手机没什么影响，但小屏幕手机会挡住手机号码输入框，体验不友好。

部分页面布局以及样式代码

html：

<div class="btn-list">
		<div class="cancel">返回</div>
		<div class="pay-price">实付50元</div>
		<div class="submit" id="confirmPay">确认支付</div>
	</div>

css样式：

.btn-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    text-align: center;
    position: fixed; // 与定位布局相关的样式
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 99;
	height: .75rem;
    line-height: .75rem;
    padding: .2rem;
	background: #F2F2F2;
}

.btn-list .cancel {
    width: 1.44rem;
	color: #AAA;
    margin-right: 1.75rem;
    background: #fff;
    box-shadow: 0 0 .2rem 0 hsla(0,0%,89%,.4);
    border-radius: .06rem
}

.btn-list .submit {
    width: 2.24rem;
	color: #fff;
    box-shadow: 0 0 .2rem 0 rgba(61,59,238,.31);
    border-radius: .06rem;
    background: #6392fe
}

.btn-list .pay-price {
    margin-right: .2rem;
    font-size: .24rem;
	width: 1.5rem;
    color: #999;
    letter-spacing: 0;
    text-align: center
}

js代码：

// 解决宽高度发生变化时 onresize事件调用多次
function windowResizeEvent(callback) {
    var resizeFlag = false;
    window.onresize = function() {
        var target = this;
        if (target.resizeFlag) {
            clearTimeout(target.resizeFlag);
        }

        target.resizeFlag = setTimeout(function() {
            resizeFlag = !resizeFlag;
            console.log(resizeFlag);
            callback(resizeFlag);
            target.resizeFlag = null;
        }, 0);
    }
}

$(function(){
	windowResizeEvent(function (resizeFlag) {
        if(resizeFlag){
            $('.btn-list').css({'position':'static'})
        }else {
            $('.btn-list').css({'position':'fixed'})
        }
    });
})