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