解决IOS的h5唤起键盘导致页面元素错位

最新推荐文章于 2025-06-22 22:51:06 发布

原创最新推荐文章于 2025-06-22 22:51:06 发布 · 952 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在iOS和Android设备上处理输入框失去焦点时的页面滚动问题，通过检测设备类型并应用特定的解决策略，确保了在不同平台下的一致用户体验。

在input绑定blur事件：

    blur(event) {
        let result;
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
            result = 'ios';
        } else if (/(Android)/i.test(navigator.userAgent)) { //判断Android
            result = 'android';
        }

        if (result = 'ios') {
            setTimeout(function () {
                var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
            }, 100);
        }
    },