美文网首页初见
移动端页面软键盘收起时ios底部有空白

移动端页面软键盘收起时ios底部有空白

作者: 幸宇 | 来源:发表于2020-06-17 15:38 被阅读0次

    监听页面中所有input输入框,对焦点和失去焦点时做优化判断处理

    let inputs = document.getElementsByTagName('input');
                let timer = null;
                for (let input of inputs) {
                    input.addEventListener('blur', function() {
                        timer = setTimeout(() => {
                            window.scrollTo(0, 0);
                            timer = null;
                        }, 0);
                    }, false);
                    input.addEventListener('focus', function() {
    
                        timer && clearTimeout(timer);
                    }, false);
                }
    

    安卓手机页面如果设置全屏,软键盘弹起收回后,整体页面会被压缩;
    全屏设置需要针对不同浏览器做判断,否则ios或者安卓会不兼容;
    全屏插件---安卓适用

    export default {
        install(Vue, options) {
            Vue.prototype.$screenFull = function () {
                let element = document.documentElement;
                console.log('全屏', this.fullscreen)
                if (this.fullscreen) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                } else {
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.webkitRequestFullScreen) {
                        element.webkitRequestFullScreen();
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();
                    } else if (element.msRequestFullscreen) {
                        // IE11
                        element.msRequestFullscreen();
                    }
                }
                this.fullscreen = !this.fullscreen;
                //this.isFullscreen = true
            }
        }
    }
    

    相关文章

      网友评论

        本文标题:移动端页面软键盘收起时ios底部有空白

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