美文网首页
移动开发h5表单键盘弹出问题

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

作者: milletmi | 来源:发表于2020-04-09 19:11 被阅读0次

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

    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貌似就好很多

    相关文章

      网友评论

          本文标题:移动开发h5表单键盘弹出问题

          本文链接:https://www.haomeiwen.com/subject/vfxhmhtx.html