移动端 ios 底部input 弹出软键盘时被遮挡

十七阿

已于 2022-06-22 16:07:10 修改

阅读量1.1k

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2022-06-22 16:00:46 首次发布

本文链接：https://blog.csdn.net/weixin_54107860/article/details/125411203

版权

<script>
    $(function () {
        $('input').on('click', function () {

            // 使用定时器是为了让输入框上滑时更加自然
            setTimeout(function () {
                // document.body.scrollTop = document.body.scrollHeight;
                var scrollTop = document.documentElement.scrollTop || window.pageYOffset ||
                    document.body.scrollTop;
                window.scrollTo(0, document.body.scrollHeight);
                console.log('111');
            }, 100);
        });
    })
    $(function () {
        (/iphone|ipod|ipad/i.test(navigator.appVersion)) && document.addEventListener('blur', event => {
            // 当页面没出现滚动条时才执行，因为有滚动条时，不会出现这问题
            // input textarea 标签才执行，因为 a 等标签也会触发 blur 事件
            document.body.scrollIntoView() // 回顶部
        }, true);
    });
</script>

原生的方法上方的是解决遮挡问题

通过让页面滚动到底部来实现

下方是解决页面被抬起失焦后的留白问题

用定时器会让整个弹起页面流畅些要不太突兀用户体验不好

而且最重要一点

如果window.scrollTo未生效请查看高度是否高出页面的高度否则不生效