美文网首页前端JavaScript的技术技巧交流~
移动端输入框在底部时输入法弹出上移的解决方法记录

移动端输入框在底部时输入法弹出上移的解决方法记录

作者: chouchou723 | 来源:发表于2018-12-29 14:43 被阅读0次

    手机的输入法弹出会导致整个页面的上移,会让fixed底部的输入框错位
    解决方法代码:

    onFocus() { 
                    this.timer = setInterval( ()=> {      
                        document.body.scrollTop = document.body.scrollHeight    
                    }, 100)
                    // document.querySelector(".footer").style.cssText += "bottom:1rem"
                    // setTimeout(() => {
                    //     this.$refs.xinput.scrollIntoView(true);
                    // }, 200)
                },
                onBlur() {
                    clearInterval(this.timer)
                    document.body.scrollTop = document.body.scrollHeight;
                    // document.querySelector(".footer").style.cssText += "bottom:0"
                },
    

    试过很多方法,但这个是最有效最彻底的,而且是很简单的一个方法,就是利用定时器..来执行scrollTop操作,因为你输入的过程也可能会切换输入法,或者英文字符,导致输入法高度变化,所以必须用定时器一直监听着...然后在失去焦点的时候clear掉

    相关文章

      网友评论

        本文标题:移动端输入框在底部时输入法弹出上移的解决方法记录

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