美文网首页初见
移动端页面软键盘收起时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