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無效不能自動播放問題 

解決方案： 請聽下回分解