关于h5页面:IOS系统下开启键盘后顶部输入框掉下来了

50次阅读

共计 382 个字符,预计需要花费 1 分钟才能阅读完成。

通过初步排查,发现几个景象:

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();};

正文完
 0