解决微信浏览器web页面键盘收起页面不回弹

629 阅读1分钟

测试发现,只有ios的微信浏览器有此问题

方法一:监测focusin/focusout

(function () {
    function isWeiXinAndIos () {
        let ua = '' + window.navigator.userAgent.toLowerCase()
        let isWeixin = /MicroMessenger/i.test(ua)
        let isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua)
        return isWeixin && isIos
    }
    let myFunction
    let isWXAndIos = isWeiXinAndIos()
    if (isWXAndIos) {
      document.body.addEventListener('focusin', () => {
        clearTimeout(myFunction)
      })
      document.body.addEventListener('focusout', () => {
        clearTimeout(myFunction)
        myFunction = setTimeout(function() {
          window.scrollTo({top: 0, left: 0, behavior: 'smooth'})
        }, 200)
      })
    }
})()

方法二: 使用setTimeOut

$('input,textarea').blur(function () {
    setTimeout(function(){
        window.scrollTo(0,document.documentElement.clientHeight);
    },100)
});

给输入框(或select选择框)添加失去焦点的事件,当输入框失去焦点,页面自动滚动到顶部,并且需要加定时器,否则偶尔会失效。

$("input").blur(function () {
    setTimeout(function() {
            var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
            window.scrollTo(0, Math.max(scrollHeight - 1, 0));
    }, 100);
});