之前我们在使用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页面输入框问题的更多相关文章

  1. Android 软键盘弹出，界面整体上移

    在做搜索功能的时候,点击搜索框,搜索框获取焦点,键盘弹出:现在问题出来了,android软键盘弹出的时候,android整个界面上移,布局被挤压,很难看:要解决这个问题,我们需要用到 windowSo ...

  2. android软键盘弹出引起的各种不适终极解决方案

    android软键盘弹出引起的各种不适终极解决方案 以下描述如何解决ListView高度小于0时出现的UI问题. 创建RelativeLayout的子类TxrjRelativeLayout publi ...

  3. Android软键盘弹出时布局问题

    最近项目需要做一个类似聊天室的模块,基于Socket实现的,这部分稍后一段时间再做总结,功能上的相关点都实现了小例子也做出来了,最后发现一个比较腻歪的问题就是软键盘弹出时总是会把标题“挤出”屏幕,(无 ...

  4. 小米note3，华为手机，软键盘弹出之后，页面上定位的元素布局会乱掉

    原因:可能是因为,软键盘弹出时,改变了height,使height:100%,不能达到原来的高度. 解决办法: $(document).ready(function () { $('body').he ...

  5. Android 软键盘弹出时把原来布局顶上去的解决方法

    键盘弹出时,会将布局底部的导航条顶上去. 解决办法: 在mainfest.xml中,在和导航栏相关的activity中加: <activity            android:name=& ...

  6. Android软键盘弹出时把布局顶上去的解决方法

    原文: 解决Andriod软键盘出现把原来的布局给顶上去的方法(转) 链接:http://blog.sina.com.cn/s/blog_9564cb6e0101g2eb.html 决方法,在main ...

  7. Android 软键盘弹出时把布局顶上去，控件乱套解决方法

    解决办法:方法一:在你的activity中的oncreate中setContentView之前写上这个代码getWindow().setSoftInputMode(WindowManager.Layo ...

  8. android软键盘弹出隐藏的监听

    通过网上搜索关于软键盘的隐藏弹出的监听,有几种方式,其中最有效的方式是在View的Onlayout()里面做文章 具体代码: 将布局视图自定义,重写onlayout()方法,然后在主Activity里 ...

  9. edittext禁止android软键盘弹出

    1. EditText ed=(EditText) findViewById(R.id.test); ed.clearFocus(); 2. 在AndroidMainfest.xml中选择哪个acti ...

随机推荐

  1. ScrollView与ListView嵌套使用，导致ListView下拉失效

    在一次项目开发中,在Scrollv中嵌套进ListView,当触摸ListView范围下拉时,整个展示页面滑动,而不是ListView内容滑动, 也就是说ListView滑动事件被ScrollView ...

  2. Loader转换器

    一.简介 webpack本身只能处理js模块,Loader可以理解为模块和资源的转换器,它本身是一个函数,接受文件作为参数,返回转换的结果.因此,我们就能通过require来加载任何类型的模块和文件. ...

  3. aside元素

    aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用.侧边栏.广告.导航条,以及其他类似的有别于主要内容的部分. aside元素主要有以下两种使用方法: 1.包 ...

  4. SQL的几种连接：内连接、左联接、右连接、全连接、交叉连接

    SQL连接可以分为内连接.外连接.交叉连接. 数据库数据:             book表                                          stu表 1.内连接 ...

  5. jjava Date格式是 May 07 17:44:06 CST 2018，怎么插入数据库中的timestamp格式中

    首先 我来记录下错误 死在时间格式转换错误手里了 大致就是时间格式转化失败 java代码中的May 07 17:44:06 CST 2018  是这个格式转换为 数据库的 yyyy-MM-dd HH: ...

  6. 8人/天，小记一次 JAVA（APP后台） 项目改造 .NET 过程（后台代码已完整开源于 Github）

    Github: https://github.com/iccb1013/Jade.Net 我们只消耗了8人/天的时间,完成了全部工作,基于我们 Jade.Net 的开源后台代码,任何小规模的后台管理系 ...

  7. api大全

    免费api大全(更新中) API大全  http://www.apidq.com/    (这个碉堡了) 天气接口 气象局接口 完整数据:http://m.weather.com.cn/data/10 ...

  8. tomcat 构建问题记录

    mvng构建程序包com.sun.image.codec.jpeg不存在------->缺少serlet的jar包 MasterSlaveRoutingDataSource不是抽象的, 并且未覆 ...

  9. SqlSugar 盲点

    1.读取数据库连接 private SqlSugarClient GetInstance() { string conmstring = System.Web.Configuration.WebCon ...

  10. JQ无缝轮播图-插件封装

    类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...