Java OpenResty Spring Spring Boot MySQL Redis MongoDB PostgreSQL Linux Android Nginx 面试 小程序 Arthas JVM AQS juc Kubernetes Docker DevOps


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

CSS JavaScript Android 大约 2702 字

问题

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

说明

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

解决

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

注意:需要添加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>
阅读 1082 · 发布于 2021-06-28

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb

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

扫描二维码关注我
昵称:
随便看看 换一批