之前我们在使用vue进行编辑表单录入的过程中,遇到了Android软键盘弹出,覆盖编辑页面输入框问题,在此进行回顾并分享给大家:
系统:Android
条件:当输入框在可视区底部或者偏下的位置
触发条件:输入框获取焦点,弹出软键盘
表现:软键盘覆盖编辑页面中的输入框
<强>问题分析:
1。发现问题:当前页面中盒为flex布的局,内容为上下固定高,中间自适应(中间区域内容过多会出现滚动条,输入框在包装的底部),输入获取焦点,手机键盘弹出,输入未上移到可视区内,怀疑是flex布局导致。
编辑页面测试代码如下:
& lt; html lang=癳n”比;
& lt; head>& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1,最大范围=1”比;& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;& lt; style>html,身体{
宽度:100%;
高度:100%;
保证金:0;
填充:0;
}.box {
显示:flex;
flex-direction:列;
宽度:100%;
高度:100%;
}.header {
高度:50 px;
宽度:100%;
背景:# 368 cda;
text-align:中心;
行高:50 px;
字体大小:20 px;
颜色:# fff;
}.wrapper {
flex: 1;
溢出:汽车;
宽度:100%;
}.content {
保证金:0;
填充:0;
}.content李{
保证金:0;
填充:0;
list-style:没有;
身高:150 px;
背景:# FFCC99;
text-align:中心;
行高:150 px;
字体大小:20 px;
颜色:# fff;
}.content李:nth-child (2 n) {
背景:# CC99CC
}
.t-input {
宽度:300 px;
高度:50 px;
边界:1 px固体# FF0000;
}.footer {
宽度:100%;
高度:48 px;
背景:# 368 cda;
text-align:中心;
行高:48 px;
字体大小:18 px;
颜色:# fff;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="盒子"比;
& lt; div类="头"祝辞头部& lt;/div>
& lt; div类=鞍捌鳌北?
& lt; ul类=澳谌荨北?
& lt; li>内容区& lt;/li>
& lt; li>内容区& lt;/li>
& lt; li>内容区& lt;/li>
& lt; li>内容区& lt;/li>
& lt; li>内容区& lt;/li>
& lt;/ul>
& lt;输入类型=拔谋尽眂lass=皌-input”占位符=笆淙肟颉北?
& lt;/div>
& lt; div类=耙辰拧钡脑诒４? lt;/div>
& lt;/div>
& lt;/body>
& lt;/html>
2。修改布局:去除箱中flex布的局,将包装器,页脚通过位置:绝对的方式定位在页面中,发现输入依旧不上移,判定与flex布局无关,代码修改如下:
& lt; style>
.box{/*显示:flex;flex-direction:列;*/宽度:100%;
高度:100%;
位置:相对;}
.wrapper {/* flex: 1;*/溢出:汽车;
宽度:100%;//通过同时设置,bototm,撑开包装,使之占屏幕除页眉和页脚外的剩余高
位置:绝对的;
上图:50 px;
底部:48 px;
}
.footer{宽度:100%;高度:48 px;背景:# 368 cda;text-align:中心;行高:48 px;字体大小:18 px;颜色:# fff;位置:绝对的;底部:0;}
& lt;/style>
3。真机模拟:进行真机与电脑连接调试,打开chrome的chrome://检查,(如下图所示),发现键盘未弹出时html高度为512 px,键盘弹出后的html的高度为288 px(减少区域的为软键盘区域),怀疑是否是因为html,身体设置了高度:100%的自适应布局后,高度跟随屏幕的可用高度改变而改变导致的。
4。代码调试:去除身体的高度:100%,给身体添加一个正好能让软键盘弹出后遮住输入框的高度,身体高度=288(软键盘出现后的html高度)+ 50(输入框高度)+ 48(保存按钮高度),发现键盘弹出遮挡着输入后,输入框会自动上移到可视区内,问题定位成功。
方案1,,,页面渲染完成后,通过JS动态获取屏幕可视区高度(注:屏幕旋转后,需重新获取屏幕高度并赋值),并将其赋值到身体的高度,这样的身体的高度一直都是屏幕的高度,当软键盘弹出后,会将身体向上推(因为身体有了固定高度,不会再继承html的自适应高度),使输入框置到可视区内,代码如下:
document.body.style。身高=window.screen。 availHeight +“px”;
方案2,,,我们可以借助元素的<代码> scrollIntoViewIfNeeded() 方法,这个方法执行后如果当前元素在可视区中不可见,则会滚动浏览器窗口或容器元素,最终让它可见,如果当前元素在可视区中,这个方法什么也不做,代码如下:
