js - 解决微信环境下,ios软键盘收起后页面空白

思路:1.判断是否在微信中
           2.判断是否在ios中
           3.表单元素焦点将页面滚回到顶部

是否是微信环境

  isWx() {
      let ua = navigator.userAgent.toLowerCase(); // 取得浏览器的userAgent字符串
      console.log(ua);
      if (ua.indexOf("micromessenger") > -1) {
        return true;
      } else {
        return false;
      }
    },

是否是ios终端

isIos(){
      let ua = navigator.userAgent.toLowerCase(); // 取得浏览器的userAgent字符串
      console.log(ua);
      if (ua.indexOf("iphone") > -1 || ua.indexOf("ios") > -1) {
        return true;
      } else {
        return false;
      }
    },

焦点消失滚动到顶部解决留白

    // 解决微信环境,ios下,键盘收起留白问题
    fixScroll() {
      if (this.isWx() && this.isIOS()) {
        console.log("解决留白");
        window.scrollTo({top: 0, left: 0, behavior: 'smooth'})
      }
    },

使用:

            <input
              type="text"
              @blur="fixScroll"
              v-model="graphicsCode"
              name="graphicsCode"
              placeholder="请输入图形验证码"
            />

 

posted @ 2020-08-25 15:11  邪儿莫  阅读(400)  评论(0编辑  收藏  举报