iphone 软键盘弹起,禁止页面整体往上滚动

最近在做一个移动端的项目,底部的输入框获得焦点时,软键盘弹起,在IOS手机上火把页面整个卷走,只看到页面的下半部分。

首先经过反复调试,找到两条重要线索:

1、先找到键盘弹起时页面中会改变的值:
测试软键盘弹起时的正文全文高度、可见区域高度、文档显示高度 、被卷去的高度這几个值是否的改变(iphone 5真机测试 320*568)。

    scrollHeight:504  不变
    offsetHeight:504  不变
    clientHeight: 504  不变
    innerHeight: 206   改变
    scrollTop:298     改变
    
    
   改变的值有文档显示高度innerHeight、被卷去的高度scrollTop这两个值

2、找到一条线索,当输入框在页面中的位置,比键盘高度高时,软键盘弹起,不会引起页面往上滚。

于是我就這样想,当键盘弹起时,就先手动让输入框弹上来,那么页面就不会滚了,然后缩短页面高度,让输入框落到页面底部。

具体做法:

 // 1、输入框获取焦点,判断是否为IOS,如果是,把input的bottom值设为文档高度,让input先飞上天,
 // 2、因为之前测试到,页面被滚走的时候,window.innerHeight会改变,所以等键盘弹起时(设置的100ms),
 // 动态改变body.height为window.innerHeight,把body的高度缩短到文档可是区域高度,
 // 然后设置input的bottom为0,这样在视觉上就实现了效果啦
handleFocus() {
  if (isIOS()) {
    this.$refs.botFooter.style.bottom = window.innerHeight + 'px'
    setTimeout(() => this.reset(), 100)
  }
},

reset() {
  document.body.style.height = window.innerHeight + 'px'
  this.$refs.botFooter.style.bottom = 0
}

我做的這个项目是嵌套在app中的,亲测有效,并且项目已上线。app中的浏览器不会出现ios自带浏览器中下方左右翻页的那个菜单条,所以在IOS自带浏览器中可能还有问题。

    原文作者:carrie
    原文地址: https://segmentfault.com/a/1190000017237707
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞