移动开发h5表单键盘弹出问题

最近在做移动端开发,每过一段时间,发现又出现新的兼容问题,这次也不例外。

ios手机

之前ios手机是没有问题的,昨天测试的时候发现键盘弹出不会有遮挡input表单的问题,但是输入完成,键盘收回后发现,页面会有一个空白位置没有收回


键盘收回.jpeg
键盘弹出.jpeg

可以在失去input焦点blur的时候用scrollTo做个处理还原页面的位置

function getPlat() {
    let u = navigator.userAgent;
    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;   //判断是否是 android终端
    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);     //判断是否是 iOS终端
    if (isAndroid) {
      return 'Android';
    } else if (isIOS) {
      return 'IOS';
    } else {
      return 'PC';
    }
}
if (getPlat() === 'IOS') {
                    setTimeout(() => {
                    const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
                    }, 0);
                }

Android手机(测试机有oppo、华为、三星、锤子)

但是在Android 手机中就没有这么容易了,测试发现,安卓手机中如果不做任何处理,弹出的键盘会遮盖输入框,但是键盘弹出后手动滚动页面,收回键盘,在聚焦弹出键盘就会定位到上次滚动的地方。其实这样也还好,但是测试要求想要自动展示到键盘上方。所以我需要做些兼容处理
经检测有几种解决办法:
一、修改输入登录模块的定位用fixed、会跟着键盘一起动,可以在聚焦失焦给样式做些处理,但是会麻烦一些
二、scrollIntoView 与 scrollIntoViewIfNeeded API
可以在页面挂载完成mounted的时候做处理,统一对所有的input和textarea做处理

if ((/Android/gi).test(navigator.userAgent)) {
                window.addEventListener('resize', function () {
                    if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
                        window.setTimeout(function () {
                            document.activeElement.scrollIntoViewIfNeeded();
                        }, 0);
                    }
                });
            }

或者在input聚焦focus的时候做处理




安卓手机有延迟,有时生效,有时会失效,可能setTimeout设置的延迟事件不够,我设置100的时候还会经常没生效,但是设置200貌似就好很多

你可能感兴趣的:(移动开发h5表单键盘弹出问题)