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

marek 发布于2019-08-23 13:51 / 4111人阅读

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

最近在做一个移动端的项目，底部的输入框获得焦点时，软键盘弹起，在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自带浏览器中可能还有问题。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99689.html

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

摘要：最近在做一个移动端的项目，底部的输入框获得焦点时，软键盘弹起，在手机上火把页面整个卷走，只看到页面的下半部分。最近在做一个移动端的项目，底部的输入框获得焦点时，软键盘弹起，在IOS手机上火把页面整个卷走，只看到页面的下半部分。首先经过反复调试，找到两条重要线索： 1、先找到键盘弹起时页面中会改变的值：测试软键盘弹起时的正文全文高度、可见区域高度、文档显示高度、被卷去的高度這...

android_c 2019-08-02 12:08 评论0 收藏0
iphone 软键盘弹起，禁止页面整体往上滚动

摘要：最近在做一个移动端的项目，底部的输入框获得焦点时，软键盘弹起，在手机上火把页面整个卷走，只看到页面的下半部分。最近在做一个移动端的项目，底部的输入框获得焦点时，软键盘弹起，在IOS手机上火把页面整个卷走，只看到页面的下半部分。首先经过反复调试，找到两条重要线索： 1、先找到键盘弹起时页面中会改变的值：测试软键盘弹起时的正文全文高度、可见区域高度、文档显示高度、被卷去的高度這...

bluesky 2019-08-29 17:28 评论0 收藏0
可能这些是你想要的H5软键盘兼容方案

摘要：然而，并没有直接监听软键盘的原生事件，只能通过软键盘弹起或收起，引发页面其他方面的表现间接监听，曲线救国。软键盘收起表现触发输入框以外的区域时，输入框失去焦点，软键盘收起。可以让软键盘弹起后，让焦点元素再次滚到可视区，强迫滚到位。前言最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从...

stackvoid 2019-08-23 17:05 评论0 收藏0