iOS webview html5 移动端 软键盘弹起遮挡输入框

iOS webview html5 移动端 软键盘弹起遮挡输入框

问题描述

移动web聊天页面，输入框在底部的时候，点击输入，弹起软键盘，iOS在将页面推上的时候会回弹一下，导致键盘刚好遮挡到输入框。

原因

初次触发输入框的focus的时候，iOS 键盘默认是以英文键盘高度推上页面，但一般我们的默认输入是中文，会导致软键盘的高度变化，中文输入键盘高度高于英文，所以导致了遮挡。

解决方法

const input = document.getElementsByTagName('input')[0];
setTimeout(() => {
    input.scrollIntoViewIfNeeded();
}, 100);

Element.scrollIntoViewIfNeeded() 方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。 此方法是标准的Element.scrollIntoView()方法的专有变体。

粘贴图片.png

延伸问题

当键盘在切换中英输入法时，键盘高度变化仍然会引起键盘遮挡

解决方案（此方案为曲线救国）

监听输入框的focus、blur 事件，当聚焦时，循环调用input.scrollIntoViewIfNeeded 方法。

当监听到blur时，停止循环。

const input = document.getElementsByTagName('input')[0];
let interval;

input.onfocus = () => {
    interval = setInterval(() => {
        input.scrollIntoViewIfNeeded();
    }, 1000);
};
input.onblur = () => {
    clearInterval(interval);
};