移动端iOS网页收起键盘底部有空白、软键盘弹起遮挡输入框等问题

1、移动端iOS网页收起键盘底部有空白: 失焦的时候把窗口滚动位置设置到（0,0）就行了

2、iOS html5 移动端 软键盘弹起遮挡输入框:

2.1、Element.scrollIntoViewIfNeeded() 方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。

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

2.2、监听输入框的focus、blur 事件

const input = document.getElementsByTagName('input')[0];
let interval;
//聚焦时
input.onfocus = () => {
    interval = setInterval(() => {
        input.scrollIntoViewIfNeeded();
    }, 400);
};
//失去焦点
input.onblur = () => {
    clearInterval(interval);
};

3、点击输入框外部，键盘收缩

  $('body').on('touchend', function(el) {
    if(el.target.tagName != 'INPUT') {
        $('input').blur()
    }
 })

原文链接：https://blog.csdn.net/weixin_40030173/article/details/102782726