vue H5 安卓部分机型键盘遮盖输入框的问题？

  • Z时代
  • 2024-03-15
  • 分类：IT

H5项目，底部要求fixed定位的输入框，键盘弹出时部分安卓机型会遮盖输入框的问题，请有效解决方案 弹窗框 class="bg-container" 使用fixed浮动定位时，获取屏幕尺寸方法 onresize 无效

 <div v-bind:style="{position: 'absolute', 'z-index': '3', top: 0, height: coverHeight + 'px', width: '100%', background: 'rgba(0,0,0, 0.5)', display: showBuyHandleDisplay}"
         class="bg-cover" @click='hideHandleModal'>
        <div class="bg-container" v-bind:style="{position: 'fixed',bottom:bottom + 'px', height: coverHeight + 'px'}">
            <div class="bg-model"
                 style="background:#FFFFFF;border-radius: 4vw 4vw 0 0;position: fixed;width: 100vw;overflow: hidden;bottom: 0">
                <div style="height: 13.866vw;display: flex;justify-content: space-around;align-items: center;">
                    <div @click.stop='hideBuyHandleModal' style="font-size: 4vw;font-weight: 400;color: #9196A1;">取消
                    </div>
                    <div>
                        <div style="font-size: 4.533vw;font-weight: 400;color: #262A33;margin-top: 2vw;">输入要购买的数量</div>
                        <div style="font-size: 3.2vw;color: #FF6B54;font-weight: 400;text-align: center;">
                            剩余：
                            <span v-text="cateNum"></span>
                        </div>
                    </div>
                    <div @click.stop="confirm" style="font-size: 4vw;font-weight: 400;color: #FF6B54;">确定</div>
                </div>
                <div style="width: 100vw;height: 21.333vw;background: #FFFFFF;border-top: 0.1vw solid #F0F2F5;display: flex;justify-content: center;align-items: center">
                    <input @focus="focus" type="tel" id="input" onkeyup="value=value.replace(/\D/g,'')"
                           placeholder="请输入" v-model="buyNum"
                           style="width: 86.4vw;height: 10.666vw;background: #F2F4F7;border-radius: 5.333vw;padding-left: 4vw;border: none;outline: none;"/>
                </div>
            </div>
        </div>
    </div>

定义输入框离底部距离 bottom

 data: {
            bottom: 0,
            nowHeight: document.documentElement.clientHeight,  //实时屏幕高度
            defaultHeight: document.documentElement.clientHeight,  //默认屏幕高度
            coverHeight: document.documentElement.clientHeight,
            showBuyHandleDisplay: 'none',
        },

监听屏幕尺寸变化

 mounted() {
            //在安卓手机上屏幕尺寸变化会产生resize事件。所以监听resize事。部分安卓手机不兼容，使用foucs事件解决
            console.log("事件监听 == ", this.defaultHeight );
            window.onresize = () => {
                console.log("获取屏幕实时尺寸 == ",onresize);
                console.log("nowHeight ==", document.documentElement.clientHeight);
                return (() => {
                    //实时屏幕高度
                    this.nowHeight = document.documentElement.clientHeight;
                })();
            };
        },

数据监听进行计算，获得输入框离底部距离

 watch: {
            //数据监听
            nowHeight: function () {
                console.log("监听数据")
                if (this.defaultHeight != this.nowHeight) {
                    //键盘弹出操作
                    this.bottom = this.defaultHeight - this.nowHeight;
                } else {
                    this.bottom = 0;
                }
                console.log("bottom ===", this.bottom);
            }
        },

以上针对android 处理，但部分机型无法获得键盘弹出后屏幕尺寸，请有效方案解决改类问题？

以上是 vue H5 安卓部分机型键盘遮盖输入框的问题？ 的全部内容， 来源链接： utcz.com/p/932824.html

回到顶部