IOS微信浏览器键盘挤压页面不回弹解决方法

import { Directive, ElementRef } from '@angular/core';


@Directive({
  selector: '[appResetPage]'
})
export class ResetPageDirective {

  constructor(el: ElementRef) {

    // 解决键盘挤压页面后不复原的问题,input失去焦点后,复原
    // 是否是苹果手机

    /*
     * iOS12以上版本,微信打开链接点击输入框获取焦点后虚拟键盘自动弹出
     * 收起键盘,原来弹出键盘的位置一片空白,页面没有自动适应整个屏幕
     * 解决办法:
     * 在当前页面滚动的位置上下滚动1px的距离即可实现页面的自适应
     */
    document.body.addEventListener('focusout', () => {
      // 软键盘收起的事件处理
      const ua = window.navigator.userAgent;
      const app = window.navigator.appVersion;
      // $alert('浏览器版本: ' + app + '\n' + '用户代理: ' + ua);
      if (!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        // $alert('ios端');
        let currentPosition, timer;
        let speed = 1;
        timer = setInterval(function () {
          currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
          currentPosition -= speed;
          window.scrollTo(0, currentPosition); // 页面向上滚动
          currentPosition += speed;
          window.scrollTo(0, currentPosition); // 页面向下滚动
          clearInterval(timer);
        }, 100);
      } else if (ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1) {
        // alert('android端');
      }
    });

  }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章