前端JavaScript的技术技巧交流~

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

2018-12-29  本文已影响0人  chouchou723

手机的输入法弹出会导致整个页面的上移,会让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掉

上一篇 下一篇

猜你喜欢

热点阅读