資訊專欄INFORMATION COLUMN
摘要：最近在做一個移動端的項目，底部的輸入框獲得焦點時，軟鍵盤彈起，在手機上火把頁面整個卷走，只看到頁面的下半部分。
最近在做一個移動端的項目，底部的輸入框獲得焦點時，軟鍵盤彈起，在IOS手機上火把頁面整個卷走，只看到頁面的下半部分。
首先經(jīng)過反復(fù)調(diào)試，找到兩條重要線索：
1、先找到鍵盤彈起時頁面中會改變的值：
測試軟鍵盤彈起時的正文全文高度、可見區(qū)域高度、文檔顯示高度 、被卷去的高度這幾個值是否的改變（iphone 5真機測試 320*568）。
scrollHeight：504 不變
offsetHeight：504 不變
clientHeight: 504 不變
innerHeight: 206 改變
scrollTop：298 改變
改變的值有文檔顯示高度innerHeight、被卷去的高度scrollTop這兩個值
2、找到一條線索，當(dāng)輸入框在頁面中的位置，比鍵盤高度高時，軟鍵盤彈起，不會引起頁面往上滾。
于是我就這樣想，當(dāng)鍵盤彈起時，就先手動讓輸入框彈上來，那么頁面就不會滾了，然后縮短頁面高度，讓輸入框落到頁面底部。
具體做法：
// 1、輸入框獲取焦點，判斷是否為IOS，如果是，把input的bottom值設(shè)為文檔高度，讓input先飛上天，
// 2、因為之前測試到，頁面被滾走的時候，window.innerHeight會改變，所以等鍵盤彈起時（設(shè)置的100ms），
// 動態(tài)改變body.height為window.innerHeight，把body的高度縮短到文檔可是區(qū)域高度，
// 然后設(shè)置input的bottom為0，這樣在視覺上就實現(xiàn)了效果啦
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中的瀏覽器不會出現(xiàn)ios自帶瀏覽器中下方左右翻頁的那個菜單條，所以在IOS自帶瀏覽器中可能還有問題。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53370.html
摘要：最近在做一個移動端的項目，底部的輸入框獲得焦點時，軟鍵盤彈起，在手機上火把頁面整個卷走，只看到頁面的下半部分。 最近在做一個移動端的項目，底部的輸入框獲得焦點時，軟鍵盤彈起，在IOS手機上火把頁面整個卷走，只看到頁面的下半部分。 首先經(jīng)過反復(fù)調(diào)試，找到兩條重要線索： 1、先找到鍵盤彈起時頁面中會改變的值： 測試軟鍵盤彈起時的正文全文高度、可見區(qū)域高度、文檔顯示高度 、被卷去的高度這...
摘要：最近在做一個移動端的項目，底部的輸入框獲得焦點時，軟鍵盤彈起，在手機上火把頁面整個卷走，只看到頁面的下半部分。 最近在做一個移動端的項目，底部的輸入框獲得焦點時，軟鍵盤彈起，在IOS手機上火把頁面整個卷走，只看到頁面的下半部分。 首先經(jīng)過反復(fù)調(diào)試，找到兩條重要線索： 1、先找到鍵盤彈起時頁面中會改變的值： 測試軟鍵盤彈起時的正文全文高度、可見區(qū)域高度、文檔顯示高度 、被卷去的高度這...
摘要：然而，并沒有直接監(jiān)聽軟鍵盤的原生事件，只能通過軟鍵盤彈起或收起，引發(fā)頁面其他方面的表現(xiàn)間接監(jiān)聽，曲線救國。軟鍵盤收起表現(xiàn)觸發(fā)輸入框以外的區(qū)域時，輸入框失去焦點，軟鍵盤收起?？梢宰屲涙I盤彈起后，讓焦點元素再次滾到可視區(qū)，強迫滾到位。 前言 最近一段時間在做 H5 聊天項目，踩過其中一大坑：輸入框獲取焦點，軟鍵盤彈起，要求輸入框吸附（或頂）在輸入法框上。需求很明確，看似很簡單，其實不然。從...
閱讀 2437·2021-11-23 10:04
閱讀 1511·2021-09-02 15:21
閱讀 903·2019-08-30 15:44
閱讀 1075·2019-08-30 10:48
閱讀 721·2019-08-29 17:21
閱讀 3567·2019-08-29 13:13
閱讀 1992·2019-08-23 17:17
閱讀 1798·2019-08-23 17:04
