H5 键盘收起 IOS没有重绘问题

1,366

场景描述

有一个输入框(input 或者 textarea),IOS 用户唤起键盘输入一串文字后,点击空白区域收起键盘。

问题描述

键盘成功收起,页面回到底部,但是点击提交按钮无反应。

问题原因

键盘收起后,IOS没有进行页面重绘,从视觉上看页面已经回弹到底部,但是逻辑层还停留在上方,所以真正的提交按钮,在所看到按钮的上方(一个看不见的位置)。

解决方案

监听 失去焦点 事件后,手动触发一下页面滑动,就可以触发页面重绘,解决这个鬼畜问题。

onBlur() {
  // 延迟的作用:等待其他事件完成 
  setTimeout(() => {
    const top = document.getElementsByTagName('html')[0].offsetTop
    window.scroll(0, -1 * top)
  }, 500);
}