三.软键盘_兼容方案(能用不算很好)

75 阅读1分钟

实现:
1.ios软键盘弹起时让页面fixed, 定住页面, 修改top值来移动页面当前聚焦的输入框位置, 并且取消fixed, 让页面可以移动, 在监听到touchmove时, 也要让页面是取消fixed状态, 可以滚动当前页面, 点击某个输入框就出现在当前视口中
2. 安卓scrollIntoView就可以了 image.png

//* 软键盘事件
    _initKeyboardState() {
      this.monitorKeyboard = new MonitorKeyboard();
      this.monitorKeyboard.onStart();

      // 监听虚拟键盘弹出事件
      this.monitorKeyboard.onShow(() => {
        this.showSaveBtn = this.FLAG.HIDE;
        this.isScrollFixed = true;
      });

      //监听键盘收起的事件
      this.monitorKeyboard.onHidden(() => {
        this.showSaveBtn = this.FLAG.SHOW;
        this.isScrollFixed = false;
      });
    },
    
    // 软键盘弹出时
    async _KeyboardFocus(el, scrollTop = 0) {
      this.isScrollFixed = true;
      await this._touchmoveFocus();
      if (this.isIos) {
        this.scrollTop = scrollTop;
      } else {
        el.scrollIntoView(false);
      }
      this.$nextTick(() => {
        el.focus();
        this._getSelectPos(el);
      });
    },
    
    // 软键盘收起时
    _KeyboardBlur() {
      this._touchmoveBlur();
      if (this.isIos) {
        this.$nextTick(() => {
          let timer = setTimeout(() => {
            this.$refs.rootref.scrollTop = this.scrollTop;
            clearTimeout(timer);
            timer = null;
          }, 40);
        });
      } else {
        document.body.scrollIntoView();
      }
    },
    
    async _touchmoveFocus() {
      document.body.addEventListener("touchmove", this._KeyboardTouchmove, {
        passive: false
      });
      document.body.addEventListener("touchend", this._KeyboardTouchEnd, {
        passive: false
      });
      return new Promise(resolve => {
        let timer = setTimeout(() => {
          this.$nextTick(() => {
            this._KeyboardTouchmove();
            clearTimeout(timer);
            timer = null;
            resolve();
          });
        });
      });
    },
    _touchmoveBlur() {
      document.body.removeEventListener("touchmove", this._KeyboardTouchmove, {
        passive: false
      });
      document.body.removeEventListener("touchend", this._KeyboardTouchEnd, {
        passive: false
      });
    },
    _KeyboardTouchmove() {
      this.isScrollFixed = false;
      !this.firstTouchmove && window.scroll();
      this.firstTouchmove = true;
    },
    _KeyboardTouchEnd() {
      this.firstTouchmove = false;
    },
    _getSelectPos(el) {
      if (typeof el.createTextRange !== "undefined") {
        var rtextRange = el.createTextRange();
        rtextRange.moveStart("character", el.value.length);
        rtextRange.collapse(true);
        rtextRange.select();
      } else if (typeof el.selectionStart !== "undefined") {
        el.selectionStart = el.value.length;
        el.focus();
      }
    },
    // 点击非输入框的dom隐藏键盘
    async hideKeyBoardfn() {
      let inputdoms = this.$refs.rootref.querySelectorAll("input,textarea");
      Array.from(inputdoms).map(dom => dom.blur());
      await new Promise(resolve => setTimeout(resolve, 100));
      const keyBoardMgr = requireModule("keyBoardMgr");
      keyBoardMgr.hideKeyBoard(() => {});
    }
    ```