Appcan踩坑：IOS系统下开启键盘后顶部输入框掉下来了

Posted 2021-08-12 亦虚

经过初步排查，发现几个现象：

• 1 只在页面总长度超过屏幕长度时发生。
• 2 只在开启键盘时发生。
• 3 只在固定定位的页面顶部输入框获取焦点（focus）时发生。
• 4 只在屏幕有滚动时发生。

缺陷有两个现象：

• 1 顶部DOM掉下来了，在大约屏幕中间的位置。
• 2 此时如果继续滚动屏幕，顶部DOM不会再维持当前位置。也就是说，它“进入”了页面的文档流。

我们初步判断是顶部DOM失去了固定定位，原因未知。怎么解决呢？

我们决定绕过这个问题，只要看起来是正常的就行。

当点击顶部DOM输入框、调出键盘的时候：

• 1 页面滚回到顶部；
• 2 屏幕滚动时，关闭ios输入面板。

关键代码如下：

  $("#search_value").on("focus", function() {    
    $(window).scrollTop(0)
  })

  window.ontouchmove = function() {
    $(\'input\').blur();
  };