ios键盘收起页面空白问题

最新推荐文章于 2023-10-13 15:06:23 发布

原创最新推荐文章于 2023-10-13 15:06:23 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

其他专栏收录该内容

8 篇文章

订阅专栏

在iOS开发中，遇到输入框较多的页面，当用户点击后面几个input并弹出键盘后，键盘收起时页面不会自动回弹，造成底部出现空白区域，影响用户体验。为解决这个问题，一种简单的解决方案是在input失去焦点时，通过代码实现页面的滚动，确保内容完全可见。

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

开发网页的时候遇到一个非常恶心的问题，ios中，一个页面有一系列input需要填写，假设有10个，点击后面几个，弹出键盘，一般会超出页面长度的。这个时候，如果收起键盘，页面不会回弹导致底部出现空白部分，这个时候，点击页面上的一些按钮会点击不中。

我这里的一个非常蠢的办法，就是判断当input失去焦点的时候，主动滚动

let u = window.navigator.userAgent;
    let res = {
        mobile: !!u.match(/AppleWebKit.*Mobile.*/),
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
        android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1,
        iPhone: u.indexOf("iPhone") > -1,
        iPad: u.indexOf("iPad") > -1
    };
if (res.iPhone || res.iPad) {
        $('body').on('touchend', function (el) {
            if (el.target.tagName != 'INPUT') {
                $('input').blur(function () {
                    document.body.scrollTop = document.body.scrollHeight;
                })
            }
        })
    }