IOS的输入框失焦滚动问题

Posted 2021-10-06 littleWang

ios当输入框的位置在比较下面的时候，会发生滚动来让出键盘对应的位置，但是有的时候就会出现让出的位置在键盘下去时没有发生回滚，所以就会出现页面出现空白显示不全的问题。

解决方案：
在包含输入框的父元素进行事件监听，当出现失焦时判断是否是输入框，然后控制滚动。为了避免出现从一个滚动框到另一个滚动框出现滚动的问题，所以对滚动事件做了延迟和清除处理。失焦采用focusout事件监听，是因为blur事件不会冒泡。

 handleInputBlur(e) {
      if (
        e &&
        e.target &&
        e.target.tagName &&
        (e.target.tagName.toLowerCase() === \'input\' ||
          e.target.tagName.toLowerCase() === \'textarea\') &&
          e.target.getAttribute(\'readonly\') !== \'readonly\'
      ) {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          window.scrollTo(0, 0)
        }, 50)
      }
    },
    // 获得焦点事件
    handleInputIn(e) {
      if (
        e &&
        e.target &&
        e.target.tagName &&
        (e.target.tagName.toLowerCase() === \'input\' ||
          e.target.tagName.toLowerCase() === \'textarea\') &&
           e.target.getAttribute(\'readonly\') !== \'readonly\'
      ) {
        if (this.timer) {
          clearTimeout(this.timer)
        }
      }
    }

Vue父元素包裹

<div  @focusout="handleInputBlur" @focusin="handleInputIn">

</div>