针对移动端安卓、ios手机键盘遮挡输入框方法处理

下面代码只处理 遮挡input输入框的情况 如果是textarea也是一样的  加上判断document.activeElement.tagName == 'TEXTAREA'

这里用的scrollIntoViewIfNeeded()方法是scrollIntoView的衍生体 对移动端安卓手机兼容兼容情况良好 但是web端兼容情况不乐观 对IE和opera和火狐浏览器部分不兼容或未知

const isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
const isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isAndroid) {
    window.addEventListener('resize', () => {
        if (document.activeElement.tagName == 'INPUT') {
            window.setTimeout(() => {
                document.activeElement.scrollIntoViewIfNeeded()
            }, 0)
        }
    })
} else if (isIos) {
    window.addEventListener('focusin', () => {
        document.body.scrollTop = document.body.scrollHeight;
        })
    window.addEventListener('focusout', () => {
        window.scrollTo(0,0);
    })
}

scrollIntoViewIfNeeded()兼容情况如下: 

针对移动端安卓、ios手机键盘遮挡输入框方法处理_第1张图片

scrollIntoView()兼容情况如下:

针对移动端安卓、ios手机键盘遮挡输入框方法处理_第2张图片 

你可能感兴趣的:(vue相关)