H5 ios移动端开发遇到的坑和解决办法（解决代码以vue为例）

不定期更新

1、问题：IOS弹起键盘以后固定定位的textarea被顶起，键盘收回以后textarea没有回到原来的位置，需要手动滑一下才会归位

解决方案： 文本框失去焦点时滚动下屏幕

代码：

<textarea placeholder="发表观点..."  @blur.prevent="autoScroll()" ></textarea>

autoScroll(){
  const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
  window.scrollTo(0, Math.max(scrollHeight - 1, 0))
}

　

2.问题：IOS点击按钮聚焦悬浮在底部的文本框，弹起的键盘遮挡住了文本框（div模拟的文本框）

解决方案：聚焦代码后更改滚动条的位置

focusInput () {
  if (this.focusInput) {
    this.$nextTick(() => {
      if (this.$refs.messageBox) this.$refs.messageBox.focus()
      setTimeout(() => { // 解决ios底部固定输入框，获取焦点时弹出输入法键盘挡住输入框
        document.body.scrollTop = document.body.scrollHeight
      }, 0)
    })
  }
}

 

3、ios音频文件autoplay无效不能自动播放问题 

解决方案： 请听下回分解