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无效不能自动播放问题 

解决方案: 请听下回分解

 

  

posted on 2019-08-01 10:05  栖木  阅读(1987)  评论(0编辑  收藏  举报

导航