iOS webview html5 移動(dòng)端 軟鍵盤(pán)彈起遮擋輸入框
問(wèn)題描述
移動(dòng)web聊天頁(yè)面报强，輸入框在底部的時(shí)候瞒御，點(diǎn)擊輸入钾腺，彈起軟鍵盤(pán)泥耀，iOS在將頁(yè)面推上的時(shí)候會(huì)回彈一下饺汹，導(dǎo)致鍵盤(pán)剛好遮擋到輸入框。
原因
初次觸發(fā)輸入框的focus的時(shí)候痰催，iOS 鍵盤(pán)默認(rèn)是以英文鍵盤(pán)高度推上頁(yè)面兜辞，但一般我們的默認(rèn)輸入是中文，會(huì)導(dǎo)致軟鍵盤(pán)的高度變化夸溶，中文輸入鍵盤(pán)高度高于英文逸吵，所以導(dǎo)致了遮擋。
解決方法
const input = document.getElementsByTagName('input')[0];
setTimeout(() => {
input.scrollIntoViewIfNeeded();
}, 100);
Element.scrollIntoViewIfNeeded() 方法用來(lái)將不在瀏覽器窗口的可見(jiàn)區(qū)域內(nèi)的元素滾動(dòng)到瀏覽器窗口的可見(jiàn)區(qū)域缝裁。 如果該元素已經(jīng)在瀏覽器窗口的可見(jiàn)區(qū)域內(nèi)扫皱，則不會(huì)發(fā)生滾動(dòng)。 此方法是標(biāo)準(zhǔn)的Element.scrollIntoView()方法的專有變體捷绑。
粘貼圖片.png
延伸問(wèn)題
當(dāng)鍵盤(pán)在切換中英輸入法時(shí)韩脑，鍵盤(pán)高度變化仍然會(huì)引起鍵盤(pán)遮擋
解決方案（此方案為曲線救國(guó)）
監(jiān)聽(tīng)輸入框的focus、blur 事件粹污，當(dāng)聚焦時(shí)段多，循環(huán)調(diào)用input.scrollIntoViewIfNeeded 方法。
當(dāng)監(jiān)聽(tīng)到blur時(shí)壮吩，停止循環(huán)进苍。
const input = document.getElementsByTagName('input')[0];
let interval;
input.onfocus = () => {
interval = setInterval(() => {
input.scrollIntoViewIfNeeded();
}, 1000);
};
input.onblur = () => {
clearInterval(interval);
};