博客 / 詳情

返回

IOS系統下開啓鍵盤後頂部輸入框掉下來了

經過初步排查,發現幾個現象:

1 只在頁面總長度超過屏幕長度時發生。
2 只在開啓鍵盤時發生。
3 只在固定定位的頁面頂部輸入框獲取焦點(focus)時發生。
4 只在屏幕有滾動時發生。
缺陷有兩個現象:

1 頂部DOM掉下來了,在大約屏幕中間的位置。
2 此時如果繼續滾動屏幕,頂部DOM不會再維持當前位置。也就是説,它“進入”了頁面的文檔流。
我們初步判斷是頂部DOM失去了固定定位,原因未知。怎麼解決呢?

我們決定繞過這個問題,只要看起來是正常的就行。

當點擊頂部DOM輸入框、調出鍵盤的時候:

1 頁面滾回到頂部;
2 屏幕滾動時,關閉IOS輸入面板。
關鍵代碼如下:

  $("#search_value").on("focus", function() {    
    $(window).scrollTop(0)
  })
  window.ontouchmove = function() {
    $('input').blur();
  };
user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.