关于ios中碰到的软键盘弹出,导致的底部输入框定位出现问题的解决方案
背景
目前正在做IM相关的H5页面,碰到了ios下软键盘弹出,底部fixed失效的问题。在ios下,body的高度不会随着软键盘的弹出而变小,所以顶部和底部的fixed元素位置都变得不正确了。要解决苹果输入框弹起被软键盘遮住的问题,切记不能使用传统的fixed或者absolute布局,根本解决不了输入框被遮住的问题。网上看了很多的解决办法都没有实现。
解决方案
首先采用flex布局来定位头部,中间和底部
<div class="con">
<div class="top">头部固定</div>
<div class="content">中间内容区域</div>
<div class="bottom">底部输入框: <input focus="focus" blur="blur" /></div>
</div>
.con{
display:flex;
}
.top,.bottom{
height:50px;
}
.content{
flex: 1 auto;
overflow:auto;
}
先看一下在不同ios版本中,软键盘弹出后输入框的位置
ios版本 | 表现 |
---|---|
10 | 输入框顶到了软键盘之上 |
11 | 输入框顶到了软键盘以上 |
12 | 输入框位置并没有发生改变 |
思路是这样的:
- 当输入框focus的时候,调用getBoundingClientRect方法获取矩形信息
- 延时100毫秒后,再次调用getBoundingClientRect方法获取矩形信息
- 两次信息的top值做一个差值,如果>0则表示输入框已经在软键盘之上
- top的差值===0,则表示输入框的位置没有发生改变,这里调用元素的scrollIntoView方法来强制使得输入框滚动到可视区,之后再通过getBoundingClientRect来获取矩阵信息,计算两次top的差值得到软键盘的高度。
- 随后设置body的height = window.innerHeight - 软键盘高度
- 再次调用输入框的scrollIntoView(false);
- 当输入框blur的时候,重新设置body的height即可
{
focus:(e){
const originRect = e.target.getBoundingClientRect();
const isFirst = false;
setTimeout(()=>{
let rect = e.target.getBoundingClientRect();
if(isFirst){
if(rect.top - originRect.top<0){
// todo 设置body的height
document.body.style.height = window.innerHeight - (originRect.top - rect.top) + "px";
e.target.scrollIntoView(false);
return;
}
}
e.target.scrollIntoView(false);
setTimeout(()=>{
rect = e.target.getBoundingClientRect();
// 某些机型下,得到的top为负值,直接使用window.innerHeight
if(rect.top>0){
document.body.style.height = window.innerHeight + "px";
}else{
document.body.style.height = window.innerHeight - (originRect.top - rect.top) + "px";
}
e.target.scrollIntoView(false);
},100);
isFirst = false;
},100);
},
blur:(){
document.body.style.height = "100%";
}
}
问题解决,如有问题,可以邮件给我(nick121212@126.com)