在進(jìn)行聊天界面開發(fā)的時(shí)候，發(fā)現(xiàn)安卓手機(jī)鍵盤會(huì)把界面頂起，但是不會(huì)收回來，在網(wǎng)上找到了這個(gè)方法解決

const originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
            window.onresize = ()=>{
                return(()=>{
                    //鍵盤彈起與隱藏都會(huì)引起窗口的高度發(fā)生變化
                    const resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
                    console.log("進(jìn)入到判斷頁面高度=========");
                    console.log("頁面初始高度========="+originalHeight);
                    console.log("軟鍵盤彈起高度========="+resizeHeight);
                    if(resizeHeight-0<originalHeight-0){
                    //當(dāng)軟鍵盤彈起，在此處操作
                    console.log("進(jìn)入到軟鍵盤彈起=========");
                        document.querySelector('body').setAttribute('style', 'height:'+originalHeight+'px;');
                        this.scrollerHeight=resizeHeight;
                    }else{
                    //當(dāng)軟鍵盤收起，在此處操作
                    console.log("進(jìn)入到軟鍵盤收起=========");
                    document.querySelector('body').setAttribute('style', 'height:100%;');
                    this.scrollerHeight="100%";
                    }
                })()

            }

之前我是在mounted中根據(jù)document.activeElement.tagName的值判斷是否為INPUT去改變鍵盤彈起的高度

window.addEventListener("resize", () => {
                if (document.activeElement.tagName === "INPUT") {
                    
                }
            });

但是在下方加了一個(gè)按鈕之后，發(fā)現(xiàn)點(diǎn)擊語音按鈕后再切換到輸入框，

WechatIMG15.jpeg

document.activeElement.tagName的值變成BODY了，查找資料發(fā)現(xiàn)

document.activeElement僅對input、textarea等標(biāo)準(zhǔn)的輸入文本有效；對于div等非編輯類的元素(即使開啟了contentEditable)，返回的值為BODY。

所以此方法在點(diǎn)擊語音后再也調(diào)用不起來，困擾了一天的問題，記錄一下