微信公众号浏览器 输入框软键盘弹起收起 高度恢复不了解决

经过描述

• 在微信公众号浏览器 H5开发中，输入框弹起软键盘，在收起，发现页面顶上去，没有恢复滚下拉
• 经过查找资料后发现，微信浏览器在部分版本缺失存在这样bug

解决思路

• 监听键盘收起、抬起事件。
• 在收起事件中，手动设置最外层盒子滚动条滚到顶部

编写一个插件专门负责

// 判断设备类型 闭包
var judgeDeviceType = function () {
    var ua = window.navigator.userAgent.toLocaleLowerCase();
    var isIOS = /iphone|ipad|ipod/.test(ua);
    var isAndroid = /android/.test(ua);
    return {
        isIOS: isIOS,
        isAndroid: isAndroid
    }
}()

// 安卓键盘收起滚动条
function wechatVersion674Height(scroll) {
    setTimeout(() => {
        $(scroll).animate({ scrollTop: 0 }, 500);
    }, 100)
}
  
// 监听输入框的软键盘弹起和收起事件
export default function listenKeybord({ inputClass, scroll }) {
    if (judgeDeviceType.isIOS) {
        const $input = document.querySelector(inputClass)

        // IOS 键盘弹起：IOS 和 Android 输入框获取焦点键盘弹起
        $input.addEventListener('focus', function () {
            console.log('IOS 键盘弹起啦！');
            // IOS 键盘弹起后操作
        }, false)

        // IOS 键盘收起：IOS 点击输入框以外区域或点击收起按钮，输入框都会失去焦点，键盘会收起，
        $input.addEventListener('blur', () => {
            console.log('IOS 键盘收起啦！');
            // IOS 键盘收起后操作
        })
    }

    // Andriod 键盘收起：Andriod 键盘弹起或收起页面高度会发生变化，以此为依据获知键盘收起
    if (judgeDeviceType.isAndroid) {
        var originHeight = document.documentElement.clientHeight || document.body.clientHeight;

        window.addEventListener('resize', function () {
            var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
            if (originHeight < resizeHeight) {
                console.log('Android 键盘收起啦！');
                wechatVersion674Height(scroll)
            } else {
                console.log('Android 键盘弹起啦！');
                
            }
            originHeight = resizeHeight;
        }, false)
    }
}

使用方式

// 引入自己写好的插件
import listenKeybord from './h5_input.js'

// 在适合位置使用函数，一般在生命周期渲染完成后
// 监听输入框 调整滚动条
listenKeybord({
     inputClass: '.van-field__control',		// 输入框样式名称
     scroll: '#mod_pay_page'				// 设置滚动条盒子样式名称
 })

最后

• 调用函数后，自动开始监听，任何需要监听input。就调用函数。设置class名称定位
• 多个则for循环执行多个函数
•