解决登录页面键盘遮挡问题

Daidason

于 2019-08-01 11:31:43 发布

阅读量272

点赞数

本文链接：https://blog.csdn.net/qq_36205027/article/details/98041161

版权

//首页面定义获取宽高函数
function res(){
        var deviceWidth = document.documentElement.clientWidth;
        // if(deviceWidth > 750) deviceWidth = 750;//根据设计图750可调
        if(deviceWidth > 540) deviceWidth = 540;//为了统一效果，跟其他的一样，用540作为
        document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
     }
 res();
  window.onresize=function(){res();}

//需要监听页面通过回调控制页面整体上滑
componentWillUnmount() {
        // window.removeEventListener("resize", this.onResize);
        super.componentWillUnmount();
}
 //界面尺寸变化回调,,弹出键盘登录,页面自动上移
    onResize = () => {
        var { activeElement } = document,
            { tagName } = activeElement,
            { availHeight } = screen,
            { innerHeight } = window;
        console.log("availHeight,innerHeight" + availHeight, innerHeight)
        if (availHeight - innerHeight > 100)
            this.setState({ focus: true });
        else
            this.setState({ focus: false });

        if (tagName == "INPUT" || tagName == "TEXTAREA") {
            window.setTimeout(function () {
                activeElement.scrollIntoViewIfNeeded(true);//页面上滑函数
            }, 0);
        }
    }