IOS輸入框不貼底解決方法（ios12新bug）

2021-09-11 09:40:46 字數 1444 閱讀 8509

結構如下 

const body = document.dcumentelement.scrolltop ? document.documentelement : document.body;


const = body;


const innerheight = math.min(window.innerheight, document.documentelement.clientheight);


body.scrolltop = scrollheight - innerheight;


複製**
如果輸入框失去焦點，就讓頁面滾動到先前的位置。 **如下：

body.scrolltop = scrolltop; // 滾動到先前的位置


複製**
這種方案在ios12上會出現兩個問題：

所以針對這些問題，我先試了網上這種據說通用的解決方法: `scrollintoview`這種方法，但是報錯了，沒有這個方法。

然後我自己分析了一下這個問題，出現各種情況的原因是因為彈出鍵盤時，頁面能夠滾動，於是就出現了各種問題，那乾脆讓頁面無法滾動。ios11及之前使用了下面的布局：

.parent 


複製**
並且禁止了touchmove事件，這樣能夠讓頁面無法滾動，但是ios12並沒有什麼卵用。還是能夠滾動，那咱們就讓內容就一屏，多的被截掉。下面是輸入框focus的**：

const  = body;


const innerheight = math.min(window.innerheight, document.documentelement.clientheight);


body.style.height = `$px`;


body.style.overflow = 'hidden';


複製**
然後就是輸入框觸發blur事件時的**：

body.style.height = `$px`;


body.style.overflow = 'auto';


body.style.scrolltop = scrolltop;


複製**
在這裡需要重新設定body的高度，高度為之前獲取的scrollheight，因為我們需要重新滾動到先前的位置，建議不要設定height為auto,因為在一些場景下我們可能需要監聽滾動事件，會出現其他的問題(穩戰穩打才能打勝仗)。然後重新設定body的overflow,讓頁面能夠滾動，最後滾動到先前的位置。

iOS鍵盤彈出遮擋輸入框的解決方法

問題 輸入框被鍵盤遮擋 期望效果 輸入框位於鍵盤上方 解決思路 監聽鍵盤出現www.cppcns.com和消失的狀態，當鍵盤出現時，當前檢視上移，當輸入完成收起鍵盤時，檢視回到初始狀態。難點 檢視向上平移的距離 原理都差不多，oc版參考 www.cppcns.com self.phoneinput ...

IOS評論框不貼底（ios12新bug）

結構如下 const body document.dcumentelement.scrolltop document.documentelement document.body const body const innerheight math.min window.innerheight,docu...

IOS評論框不貼底（ios12新bug）

結構如下 const body document.dcumentelement.scrolltop document.documentelement document.body const body const innerheight math.min window.innerheight,docu...