（vue）移动端点击输入框，弹出键盘，底部被顶起问题

Posted 2023-04-27

参考技术A data ()

    return

        docmHeight: '0',  //默认屏幕高度

        showHeight:  '0',  //实时屏幕高度

        hidshow:true  //显示或者隐藏footer,

       isResize:false //默认屏幕高度是否已获取

    ;

  ,

mounted()

    // window.onresize监听页面高度的变化

    window.onresize = ()=>

        return(()=>

                     if (!this.isResize)

                               //默认屏幕高度

                               this.docmHeight: document.documentElement.clientHeight 

                               this.isResize = true

                       

                        //实时屏幕高度

                       this.showHeight = document.body.clientHeight 

        )()

    

  ,

showHeight:function()

        if(this.docmHeight > this.showHeight)

            this.hidshow=false

        else

            this.hidshow=true

        

    

<div class="footer" v-show="hidshow">

移动端点击输入框，弹出键盘，底部被顶起问题

</div>

vue解决安卓手机软键盘弹出,页面高度被顶起

参考技术A 在进行聊天界面开发的时候，发现安卓手机键盘会把界面顶起，但是不会收回来，在网上找到了这个方法解决

之前我是在mounted中根据document.activeElement.tagName的值判断是否为INPUT去改变键盘弹起的高度

但是在下方加了一个按钮之后，发现点击语音按钮后再切换到输入框，

document.activeElement.tagName的值变成BODY了，查找资料发现

所以此方法在点击语音后再也调用不起来，困扰了一天的问题，记录一下