美文网首页前端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