【土旦】vue 解決ios H5底部輸入框 獲取焦點時彈出虛擬鍵盤擋住輸入框 以及監聽鍵盤收起事件

問題描述

im聊天H5頁面，在iOS系統下，inpu獲取焦點彈出系統虛擬鍵盤時，會出現擋住input的情況，十分影響用戶體驗。

---

bug圖

 

 

---

 

解決方法：

html：

　　<input type="text" v-model="msg" maxlength="500" ref="inputShow" @click="inputShow" />

js：

setTimeout(()=>{
　　this.$refs.inputShow.scrollIntoView();
　　document.body.scrollTop = document.body.scrollHeight;
},100)

---

 

問題描述

　　在IOS鍵盤點擊發送並不會執行按鈕事件

解決方法

1、在 mounted 生命周期里面 加一個全局事件監聽

    document.body.addEventListener('focusout', () => { 
        //軟鍵盤關閉事件
   
    })    

2、給input加失去焦點事件

 

記錄走過的路，踩過的坑，互勉。

　　前端交流群：87709616

有不同意見的可以留言，我們一起討論。