移动开发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的时候做处理

<template>
<input
                v-model="codeValue"
                type="text"
                placeholder="请输入收到的验证码"
                class="verify-input"
                maxlength="6"
                @focus="changefocus"
                @blur.prevent="blur"
            >
</template>
<script>
export default {
    methods: {
        blur(){
             if (judgeClient() === 'IOS') {
                    setTimeout(() => {
                    const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
                    }, 0);
                }
},
        changefocus() {
            if (this.getPlat() === 'Android') {
                    setTimeout(() => {
                        el.target.scrollIntoViewIfNeeded(true);
                        el.target.scrollIntoView(true);
                    }, 200);
                }
        },
     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';
      }
}
}
}
</script>

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