移動端喚起鍵盤時取消position:fixed定位

當在移動端按鈕position:fixed;底部bottom:0;

固定定位後，當喚起鍵盤輸入數據時就會出現很頭疼的問題：

固定在底部的按鈕會被系統自帶的鍵盤擠上去，佔用輸入框位置；

如圖：

怎麼樣才能讓按鈕固定底部，後面找到了兩種方式。

HTML

<div class="submit">
     <button type="button" class="btn">提交信息</button>
</div>

css

.submit {
    display: flex;
    width: 100%;
    justify-content: center;
    position: fixed;
    bottom: 0;
}

1.第一種

經過輸入框input獲取焦點/移除焦點 來控制按鈕的position樣式；

js

$("input,textarea").focus(function(){
      $(".submit").css("position","static");
}).blur(function(){
   $(".submit").css("position","fixed");            
});

效果是實現了，可是後面發現一個問題，如圖：

會發現按鍵沒有顯示完整。

2.第二種

須要瞭解 resize()

經過resize() 方法觸發 resize 事件，或規定當發生 resize 事件時運行的函數。

js

var windheight = $(window).height();  /*未喚起鍵盤時當前窗口高度*/
        
$(window).resize(function(){
   var docheight = $(window).height();  /*喚起鍵盤時當前窗口高度*/        
   if(docheight < windheight){            /*當喚起鍵盤高度小於未喚起鍵盤高度時執行*/
      $(".submit").css("position","static");
   }else{
      $(".submit").css("position","fixed");
   }           
});

運行後顯示效果

喚起時：

取消時：

這樣就完美解決了相似鍵盤問題，固然這種方式也能夠運用到其餘場景當中。

前端菜鳥，多多指教