H5解决软键盘弹起导致遮挡输入框问题

从网上粘来的方法：

var clientHeight = $(window).height()// 初始化屏幕高度
            var isFocus = false// 是否有input标签被选中，false没有， true有
            var focusDom = null// 当前选中的input标签
            $(document).on('focus', 'input', function (e){// 监听输入框是否选中
                focusDom = $(this)
                $(window).on('touchmove', function() {// 当前页面滚动，收起手机软键盘
                    isFocus = false
                    focusDom.blur()
                })
                if( isFocus ){// 若已有input标签被选中，跳过以下处理
                    return
                }
                
                let bottomHeight = $(window).height() - $(this).height() - $(this).offset().top + $(document).scrollTop()// 当前选中元素距离屏幕底部距离
                // console.log(bottomHeight)
                if( bottomHeight < 300 ){
                    // 若距离底部距离小于300
                    var top = $('#recommended .content').scrollTop()
                    setTimeout(()=>{// 待软键盘弹起动画结束后执行
                        $('#recommended .content').scrollTop(top + 300)// 滚动高度增加300像素，（假设手机软键盘高度为300）
                        isFocus = true
                    }, 300)
                }else{
                    setTimeout(()=>{// 待软键盘收起动画结束后执行
                        isFocus = true
                    }, 300)
                }
                
            })
            $(document).on('blur', 'input', function (){// 收起手机软键盘后，取消监听
                focusDom = null
                if( !document.activeElement ) {// 判断当前是否有focus元素 
                    isFocus = false
                }
                $(window).off('touchmove')
            })
            $(window).resize(function() {// 监听手机软键盘弹起以及收起
                
                if( clientHeight == $(window).height() ){// 手机软键盘收起,使所有input失焦
                    isFocus = false
                    focusDom.blur()
                }
                
            })

毫无优化的方法：

const input = document.querySelectorAll('input');
 
input.forEach(ele => {
    ele.addEventListener('focus', () => {
        document.body.style.marginBottom = '300px';
        document.body.scrollIntoView();
    });
    ele.addEventListener('blur', () => {
        document.body.style.marginBottom = '0';
    });
});

参考链接：
H5解决软键盘弹起导致遮挡输入框问题
如何用 js 获取虚拟键盘高度？（适用所有平台）
移动端input“输入框”常见问题及解决方法