【移动端H5开发】iOS下页面底部的input被弹出键盘遮挡问题

状况

在iOS下,如果页面底部有个input输入框,那么在input获得焦点,弹出虚拟键盘时,有一定的几率,input会被虚拟键盘给遮挡住,体验很糟糕。 尤其是第三方输入法,这个出现的几率极高。
这其实已经是一个老生常谈的问题,从早期的iOS版本一直持续到现在iOS11都是这样,感觉上像是iOS的bug,但是不知道为什么一直没有解决。
打印日志观察,发现键盘弹出后,页面窗口是变矮了,然后页面滚动到底部,即使是出现input框被虚拟键盘遮挡了,这个时候window.innerHeight + document.body.scrollTop 依然是和 document.body.scrollHeight相等的,所以简单的对比这两个数值来判断页面是否已经滚动到了底部是不行的。
网上查阅了大量的资料,提到了各种各样的解决办法,尝试了不下10种,基本上都不靠谱,不能最终解决,最后还是通过定时器动态调整scrollTop解决了这个问题(仍旧不完美)。

中间踩过的一些坑

  1. 不要用fixed布局,iOS对fixed布局的支持比较弱,在虚拟键盘弹出的时候,fixed布局的元素有可能出现各种各样的问题,建议直接用absolute布局取代
  2. 网上有说改用flex布局可以解决这个问题,实践发现压根没用,大家可以不用再试
  3. 只调整一次scrollTop是不够的,最好在1秒内调整多次,比如每300毫秒调整一次

解决之道

在input的focus事件中,开启一个定时器,然后每隔300毫秒进行一次document.body.scrollTop=document.body.scrollHeight的调整,运行3次即可。然后在input的blur事件中,取消掉这个定时器。这样虽然input不会被遮挡了,但是由于滚动回弹的原因,视觉上会有页面回弹的效果,就是这点不太完美。
参考代码如下:

var timerId = null; 

onFocus(e) {
  let cnt = 0;
  setInterval( () => {
    if (cnt < 3) {
      cnt++;
    } else {
      clearInterval(timerId);
      timerId = null;
      return;
    }
    document.body.scrollTop = document.body.scrollHeight;
  }, 300);
} 

onBlur(e) {
  if (timerId) {
    clearInterval(timerId);
    timerId = null;
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,425评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,058评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,186评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,848评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,249评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,554评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,830评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,536评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,239评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,346评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,999评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2 267

推荐阅读更多精彩内容