解决Android软键盘弹出覆盖h5页面输入框问题

更新时间：2018年05月22日 10:20:27 作者：进军的蜗牛

之前我们在使用vue进行 h5 表单录入的过程中，遇到了Android软键盘弹出，覆盖 h5页面输入框问题，在此进行回顾并分享给大家,感兴趣的朋友跟随脚本之家小编一起学习吧

之前我们在使用vue进行 h5 表单录入的过程中，遇到了Android软键盘弹出，覆盖 h5页面输入框问题，在此进行回顾并分享给大家:

系统：Android

条件：当输入框在可视区底部或者偏下的位置

触发条件：输入框获取焦点，弹出软键盘

表现：软键盘覆盖 h5页面中的输入框

问题分析：

1.发现问题：当前页面中box为flex布局，内容为上下固定高，中间自适应（中间区域内容过多会出现滚动条，input框在wrapper的底部），input获取焦点，手机键盘弹出，input未上移到可视区内，怀疑是flex布局导致。

h5页面测试代码如下：

<html lang="en"> 
 <head>  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>  <style>   html,body{    
    width:100%;    
    height:100%;    
    margin:0;    
    padding:0;   
   }   .box{    
    display:flex;    
    flex-direction:column;    
    width:100%;    
    height:100%;   
   }   .header{    
    height:50px;    
    width:100%;    
    background:#368CDA;    
    text-align:center;    
    line-height:50px;    
    font-size:20px;    
    color:#fff;   
   }   .wrapper{    
    flex:1;    
    overflow:auto;    
    width:100%;   
   }   .content {    
    margin:0;    
    padding:0;   
   }   .content li{    
    margin:0;    
    padding:0;    
    list-style:none;    
    height:150px;    
    background:#FFCC99;    
    text-align:center;    
    line-height:150px;    
    font-size:20px;    
    color:#fff;   
   }   .content li:nth-child(2n){    
    background:#CC99CC   
 }  
     .t-input{    
    width:300px;    
    height:50px;    
    border:1px solid #FF0000;   
   }   .footer{    
    width:100%;    
    height:48px;    
    background: #368CDA;    
    text-align:center;    
    line-height:48px;    
    font-size:18px;    
    color:#fff;   
   }  
 </style> 
 </head> 
 <body>
  <div class="box">   
 <div class="header">头部</div>  
  <div class="wrapper">    
 <ul class="content">    
 <li>内容区</li>    
 <li>内容区</li>    
 <li>内容区</li>    
 <li>内容区</li>    
 <li>内容区</li>  
 </ul>    
 <input type="text" class="t-input" placeholder="输入框">  
 </div>   
 <div class="footer">保存</div> 
  </div> 
 </body>
</html>

2.修改布局：去除box中的flex布局，将wrapper、footer通过position:absolute的方式定位在页面中，发现input依旧不上移，判定与flex布局无关，代码修改如下：

<style> 
 .box{ /*display:flex; flex-direction:column;*/  
 width:100%;  
 height:100%;  
 position:relative; } 
 .wrapper{/*flex:1; */ 
 overflow:auto;  
 width:100%;  
 // 通过同时设置top、bototm，撑开wrapper，使之占屏幕除header和footer外的剩余高  
 position:absolute;  
 top:50px;  
 bottom:48px; 
} 
.footer{ width:100%;  height:48px;  background: #368CDA;  text-align:center;  line-height:48px;  font-size:18px;  color:#fff;  position:absolute;  bottom:0; } 
</style>

3.真机模拟：进行真机与电脑连接调试，打开chrome的chrome://inspect，(如下图所示)，发现键盘未弹出时html高度为512px，键盘弹出后html的高度为288px(减少区域的为软键盘区域)，怀疑是否是因为html、body设置了height:100%的自适应布局后,高度跟随屏幕的可用高度改变而改变导致的。

4.代码调试：去除body的height:100%，给body添加一个正好能让软键盘弹出后遮住输入框的高度，body高度 = 288(软键盘出现后html高度)+50(输入框高度)+48(保存按钮高度) ，发现键盘弹出遮挡着input后，input框会自动上移到可视区内，问题定位成功。

解决方案：

方案1 页面渲染完成后，通过JS动态获取屏幕可视区高度（注：屏幕旋转后，需重新获取屏幕高度并赋值），并将其赋值到body的height，这样body的高度一直都是屏幕的高度，当软键盘弹出后，会将body向上推（因为body有了固定高度，不会再继承html的自适应高度），使输入框置到可视区内，代码如下：

document.body.style.height = window.screen.availHeight +'px';

方案2 我们可以借助元素的 scrollIntoViewIfNeeded（） 方法，这个方法执行后如果当前元素在可视区中不可见，则会滚动浏览器窗口或容器元素，最终让它可见，如果当前元素在可视区中，这个方法什么也不做，代码如下：

window.addEventListener('resize', () => { 
 if (document.activeElement.tagName == 'INPUT') {  
  //延迟出现是因为有些 Android 手机键盘出现的比较慢   window.setTimeout(() => {   
   document.activeElement.scrollIntoViewIfNeeded();  
 }, 100); 
} });

总结

以上所述是小编给大家介绍的解决Android软键盘弹出覆盖h5页面输入框问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

Android应用开发中数据的保存方式总结
这篇文章主要介绍了Android应用开发中数据的保存方式总结,包括对ROM、SD卡、SharedPreference这三种方式实现的核心代码的精选,需要的朋友可以参考下
2016-02-02
Android开发退出程序的方法汇总
Android程序有很多Activity，比如说主窗口A，调用了子窗口B，子窗口B又调用子窗口C，back返回子窗口B后，在B中如何关闭整个Android应用程序呢? 下面脚本之家小编就给大家介绍android开发退出程序的几种方法，感兴趣的朋友参考下吧
2016-03-03
Android自定义PhotoView使用教程
自定义 PhotoView 继承(extends)自 View。并在最中间显示后面操作的图片。绘制图片可以重写 onDraw()方法，并在里面通过Canvas.drawBitmap()来要绘制图片
2023-04-04
Android ProgressBar组件使用教程
Android ProgressBar分为水平进度条和圆形进度条, 看官方的划分是Indeterminate Progress(不确定的进度) 和 Determinate Progress(决定进度)下面有2个demo一个是圆形的进度条和一个水平的进度条
2022-11-11
Android应用隐私合规检测实现方案详解
这篇文章主要介绍了Android应用隐私合规检测实现方案,我们需要做的就是提前检测好自己的应用是否存在隐私合规问题，及时整改过来，下面提供Xposed Hook思路去检测隐私合规问题，建议有Xposed基础的童鞋阅读，需要的朋友可以参考下
2022-07-07
flutter封装单选点击菜单工具栏组件
这篇文章主要介绍了flutter封装单选点击菜单工具栏组件，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-05-05
Android Hilt的使用以及遇到的问题
这篇文章主要介绍了Android Hilt的使用以及遇到的问题，帮助大家更好的理解和学习使用Android开发，感兴趣的朋友可以了解下
2021-04-04
Android Studio 3.6中使用视图绑定替代 findViewById的方法
从 Android Studio 3.6 开始，视图绑定能够通过生成绑定对象来替代 findViewById，从而可以帮您简化代码、移除 bug，并且从 findViewById 的模版代码中解脱出来，今天通过本文给大家介绍使用视图绑定替代 findViewById的方法，感兴趣的朋友一起看看吧
2020-03-03
Android RecyclerView 复用错乱通用解法详解
本篇文章主要介绍了Android RecyclerView 复用错乱通用解法详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
Android自定义View实现拖动选择按钮
这篇文章主要为大家详细介绍了Android自定义View实现拖动选择按钮的具体代码，感兴趣的小伙伴们可以参考一下
2016-05-05