iphone 軟鍵盤彈起，禁止頁面整體往上滾動

bluesky 發布于2019-08-29 17:28 / 1189人閱讀

摘要：最近在做一個移動端的項目，底部的輸入框獲得焦點時，軟鍵盤彈起，在手機上火把頁面整個卷走，只看到頁面的下半部分。

最近在做一個移動端的項目，底部的輸入框獲得焦點時，軟鍵盤彈起，在IOS手機上火把頁面整個卷走，只看到頁面的下半部分。

首先經過反復調試，找到兩條重要線索：

1、先找到鍵盤彈起時頁面中會改變的值：
測試軟鍵盤彈起時的正文全文高度、可見區域高度、文檔顯示高度、被卷去的高度這幾個值是否的改變（iphone 5真機測試 320*568）。

    scrollHeight：504  不變
    offsetHeight：504  不變
    clientHeight: 504  不變
    innerHeight: 206   改變
    scrollTop：298     改變
    
    
   改變的值有文檔顯示高度innerHeight、被卷去的高度scrollTop這兩個值

2、找到一條線索，當輸入框在頁面中的位置，比鍵盤高度高時，軟鍵盤彈起，不會引起頁面往上滾。

于是我就這樣想，當鍵盤彈起時，就先手動讓輸入框彈上來，那么頁面就不會滾了，然后縮短頁面高度，讓輸入框落到頁面底部。

具體做法：

 // 1、輸入框獲取焦點，判斷是否為IOS，如果是，把input的bottom值設為文檔高度，讓input先飛上天，
 // 2、因為之前測試到，頁面被滾走的時候，window.innerHeight會改變，所以等鍵盤彈起時（設置的100ms），
 // 動態改變body.height為window.innerHeight，把body的高度縮短到文檔可是區域高度，
 // 然后設置input的bottom為0，這樣在視覺上就實現了效果啦
handleFocus() {
  if (isIOS()) {
    this.$refs.botFooter.style.bottom = window.innerHeight + "px"
    setTimeout(() => this.reset(), 100)
  }
},

reset() {
  document.body.style.height = window.innerHeight + "px"
  this.$refs.botFooter.style.bottom = 0
}

我做的這個項目是嵌套在app中的，親測有效，并且項目已上線。app中的瀏覽器不會出現ios自帶瀏覽器中下方左右翻頁的那個菜單條，所以在IOS自帶瀏覽器中可能還有問題。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114345.html

iphone 軟鍵盤彈起，禁止頁面整體往上滾動

摘要：最近在做一個移動端的項目，底部的輸入框獲得焦點時，軟鍵盤彈起，在手機上火把頁面整個卷走，只看到頁面的下半部分。最近在做一個移動端的項目，底部的輸入框獲得焦點時，軟鍵盤彈起，在IOS手機上火把頁面整個卷走，只看到頁面的下半部分。首先經過反復調試，找到兩條重要線索： 1、先找到鍵盤彈起時頁面中會改變的值：測試軟鍵盤彈起時的正文全文高度、可見區域高度、文檔顯示高度、被卷去的高度這...

marek 2019-08-23 13:51 評論0 收藏0
iphone 軟鍵盤彈起，禁止頁面整體往上滾動

摘要：最近在做一個移動端的項目，底部的輸入框獲得焦點時，軟鍵盤彈起，在手機上火把頁面整個卷走，只看到頁面的下半部分。最近在做一個移動端的項目，底部的輸入框獲得焦點時，軟鍵盤彈起，在IOS手機上火把頁面整個卷走，只看到頁面的下半部分。首先經過反復調試，找到兩條重要線索： 1、先找到鍵盤彈起時頁面中會改變的值：測試軟鍵盤彈起時的正文全文高度、可見區域高度、文檔顯示高度、被卷去的高度這...

android_c 2019-08-02 12:08 評論0 收藏0
可能這些是你想要的H5軟鍵盤兼容方案

摘要：然而，并沒有直接監聽軟鍵盤的原生事件，只能通過軟鍵盤彈起或收起，引發頁面其他方面的表現間接監聽，曲線救國。軟鍵盤收起表現觸發輸入框以外的區域時，輸入框失去焦點，軟鍵盤收起。可以讓軟鍵盤彈起后，讓焦點元素再次滾到可視區，強迫滾到位。前言最近一段時間在做 H5 聊天項目，踩過其中一大坑：輸入框獲取焦點，軟鍵盤彈起，要求輸入框吸附（或頂）在輸入法框上。需求很明確，看似很簡單，其實不然。從...

stackvoid 2019-08-23 17:05 評論0 收藏0