vue 或者傳統h5移動端input被輸入法鍵盤擋住解決方法

項目里的報名表單中，在沒有頂部也沒有底部的情況下，正常排版沒有用flex布局，當觸焦input時，輸入法檔住了，如下圖：

解決方法：

1.先給最外層的div一個ID取名比如 id="apply"如下圖：

2.定義一個class:

.focusState {position: absolute;}

 

3.利用監聽鍵盤的收起展開事件來添加移除定義的focusState 樣式

  created(){
    var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    window.onresize = function() {
        var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        if (clientHeight - nowClientHeight > 60 ) {//因為ios有自帶的底部高度
            //鍵盤彈出的事件處理
            document.getElementById("apply").classList.add("focusState");
        }
        else {
            //鍵盤收起的事件處理
        	document.getElementById("apply").classList.remove("focusState");
        } 
    };
},

 

解決之后的效果:

解決方法二、利用input觸焦移焦的寫法：
這里在需要的input標簽上同時綁定@click的focusInput和blurInput事件 ,.focusState樣式照常，然后如下：

methods: {
        // focusInput(){
        //     document.getElementById("apply").classList.add("focusState");
        // },
        
        // blurInput(){
        //     document.getElementById("apply").classList.remove("focusState");
        // },
     }

此方法如果在沒有移出input焦點時收起鍵盤的情況下，會出現移除class無效的頁面bug ，建議用鍵盤監聽方法