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