CSS absolute 绝对定位布局在 Android 系统软键盘弹出时被顶起

CSS JavaScript Android About 2,702 words

问题

Android系统中，HTML元素在使用绝对定位时，当软键盘弹出时，绝对定位的元素被顶起。iOS、Surface无此问题。

说明

网络上已经有很多关于JavaScript监听Android软键盘弹出与隐藏的文章，很多只判断了innerHeight或clientHeight，但当设备旋转时会出现问题。

解决

记录innerHeight和innerWidth的大小总和进行判断，保证设备旋转时等到的值是正确的，只记录高度在设备旋转时会出错。

注意：需要添加viewport，禁止在移动端缩放，防止宽高被拉伸导致出错。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script>
        let originalSize;
        window.onload = function () {
            originalSize = window.innerWidth + window.innerHeight;
            document.getElementById("init").innerText = "originalSize#" + originalSize + ", innerWidth#" + window.innerWidth + ", innerHeight#" + window.innerHeight;
        }

        window.addEventListener("resize", this.adjustDisplay);
        function adjustDisplay() {
            const nowSize = window.innerWidth + window.innerHeight;
            document.getElementById("resize").innerText = "originalSize#" + originalSize + ", nowSize#" + nowSize + ", innerWidth#" + window.innerWidth + ", innerHeight#" + window.innerHeight;
            if (originalSize > nowSize) {
                // 软键盘弹出
                // document.getElementById("myDiv").style.display = "none";
                document.getElementById("status").innerText = "软键盘弹出"
            } else {
                // 软键盘隐藏
                // document.getElementById("myDiv").style.display = "block";
                document.getElementById("status").innerText = "软键盘隐藏"
            }
        }

        // // 只记录高度在设备旋转时会出错
        // let innerHeight;
        // window.onload = function () {
        //     innerHeight = window.innerHeight;
        //     document.getElementById("init").innerText = "innerHeight#" + window.innerHeight;
        // }

        // window.addEventListener('resize', () => {
        //     const newInnerHeight = window.innerHeight;
        //     document.getElementById("resize").innerText = "originalInnerHeight#" + innerHeight + ", newInnerHeight#" + newInnerHeight;
        //     if (innerHeight > newInnerHeight) {
        //         // 键盘弹出事件处理
        //         document.getElementById("status").innerText = "软键盘弹出"

        //     } else {
        //         // 键盘收起事件处理
        //         document.getElementById("status").innerText = "软键盘隐藏"
        //     }
        // });
    </script>
</head>

<body>
    <div id="init"></div>
    <div id="resize"></div>
    <div id="status">test</div>
    <input type="text">
</body>

</html>

Views: 2,018 · Posted: 2021-06-28

———— END ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓