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

系统：Android

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

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

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

问题分析：

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

h5页面 测试代码如下：

  1. <html lang="en">    
  2.  
  3.    <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{              
  4.  
  5.                width:100%;              
  6.  
  7.                height:100%;              
  8.  
  9.                margin:0;              
  10.  
  11.                padding:0;            
  12.  
  13.            }            .box{              
  14.  
  15.                display:flex;              
  16.  
  17.                flex-direction:column;              
  18.  
  19.                width:100%;              
  20.  
  21.                height:100%;            
  22.  
  23.            }            .header{              
  24.  
  25.                height:50px;              
  26.  
  27.                width:100%;              
  28.  
  29.                background:#368CDA;              
  30.  
  31.                text-align:center;              
  32.  
  33.                line-height:50px;              
  34.  
  35.                font-size:20px;              
  36.  
  37.                color:#fff;            
  38.  
  39.            }            .wrapper{              
  40.  
  41.                flex:1;              
  42.  
  43.                overflow:auto;              
  44.  
  45.                width:100%;            
  46.  
  47.            }            .content {              
  48.  
  49.                margin:0;              
  50.  
  51.                padding:0;            
  52.  
  53.            }            .content li{              
  54.  
  55.                margin:0;              
  56.  
  57.                padding:0;              
  58.  
  59.                list-style:none;              
  60.  
  61.                height:150px;              
  62.  
  63.                background:#FFCC99;              
  64.  
  65.                text-align:center;              
  66.  
  67.                line-height:150px;              
  68.  
  69.                font-size:20px;              
  70.  
  71.                color:#fff;            
  72.  
  73.            }            .content li:nth-child(2n){              
  74.  
  75.                background:#CC99CC
  76.    }
  77.                  .t-input{              
  78.  
  79.                width:300px;              
  80.  
  81.                height:50px;              
  82.  
  83.                border:1px solid #FF0000;            
  84.  
  85.            }            .footer{                
  86.  
  87.                width:100%;                
  88.  
  89.                height:48px;                
  90.  
  91.                background: #368CDA;                
  92.  
  93.                text-align:center;                
  94.  
  95.                line-height:48px;                
  96.  
  97.                font-size:18px;                
  98.  
  99.                color:#fff;            
  100.  
  101.            }
  102.   </style>
  103.   </head>
  104.   <body>
  105.         <div class="box">
  106.  <div class="header">头部</div>
  107.      <div class="wrapper">
  108.  <ul class="content">
  109.    <li>内容区</li>
  110.    <li>内容区</li>
  111.     <li>内容区</li>
  112.    <li>内容区</li>
  113.     <li>内容区</li>
  114.    </ul>
  115.   <input type="text" class="t-input" placeholder="输入框">
  116.     </div>
  117.   <div class="footer">保存</div>
  118.       </div>
  119.    </body>
  120.  
  121. </html>

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

  1. <style>
  2.   .box{ /*display:flex; flex-direction:column;*/       
      width:100%;        
      height:100%;        
      position:relative;    }
  3.   .wrapper{/*flex:1; */ 
      overflow:auto;     
      width:100%;
  4.   // 通过同时设置top、bototm，撑开wrapper，使之占屏幕除header和footer外的剩余高     
      position:absolute;        
      top:50px;        
      bottom:48px;    
    }
  5. .footer{ width:100%;        height:48px;        background: #368CDA;        text-align:center;        line-height:48px;        font-size:18px;        color:#fff;        position:absolute;        bottom:0;    }
  6. </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的自适应高度），使输入框置到可视区内，代码如下：

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

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

  1. window.addEventListener('resize', () => {    
  2.  
  3.    if (document.activeElement.tagName == 'INPUT') {        
  4.  
  5.        //延迟出现是因为有些 Android 手机键盘出现的比较慢         window.setTimeout(() => {            
  6.  
  7.            document.activeElement.scrollIntoViewIfNeeded();        
  8.  
  9.     }, 100);    
  10.  
  11. } });

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. obj-c编程10:Foundation库中类的使用(2)[字符串,数组]

    Foundation库的内容不可谓不多,就算很精简的说篇幅也受不了啊!笨猫一向反对博客文章一下子拖拖拉拉写一大坨!KISS哦!so将上一篇文章再分一篇来说,于是有了这篇,可能还会有(3)哦... 我发 ...

  2. LeetCode（47）-Reverse Bits

    题目: Reverse bits of a given 32 bits unsigned integer. For example, given input 43261596 (represented ...

  3. 从Windows角度看Mac OS X上的软件开发

    如果原来从事Windows软件开发,想跨足或转换至Mac OS X环境,需要知道那些东西?有什么知识技能可以快速运用在Mac OS X环境上的?这两个问题应该是Windows开发者进入Mac OS X ...

  4. java常用数据库连接池 (DBCP、c3p0、Druid) 配置说明

    1. 引言 1.1 定义 数据库连接是一种关键的有限的昂贵的资源,这一点在多用户的网页应用程序中体现得尤为突出.对数据库连接的管理能显著影响到整个应用程序的伸缩性和健壮性,影响到程序的性能指标.数据库 ...

  5. 【JDK1.8】JUC——AbstractQueuedSynchronizer

    一.前言 在上一篇中,我们对LockSupport进行了阅读,因为它是实现我们今天要分析的AbstractQueuedSynchronizer(简称AQS)的基础,重新用一下最开始的图: 可以看到,在 ...

  6. Xshell 5 配置上传下载命令

    可以在官网https://www.netsarang.com/products/main.html 下载Xshell, 目前最新的版本已经到Xshell 6了 本人记录下安装的目录截图: 安装命令:  ...

  7. windows SSH Tunnel实施日记

    1.准备条件:SSH跳板服务器一个.软件:Putty,CCProxy 2.putty建立SSH Tunnel:先在session那儿把服务器地址填好,到Tunnel界面上,选Dynamics和Auto ...

  8. 对于程序员在boss直聘求职的建议

    最近为一个岗位的招聘,在直聘伤刷了三百份简历 0.上传简历最好是PDF,word简历在不同的系统和软件下排版可能会出问题. 1.新职位投得要快,后面投的,有可能看不到. 为了投的命中率,投之前最好看一 ...

  9. php仿经典省市县三级联动

    之前有个需求要写个类似省市县三级联动的页面,于是,网上找了点资料看了下,其实原理很简单: 当我们选择一级栏目中某条记录的时候,会获取该栏目的vaule值,并发起ajax请求,后台根据这个vaule值, ...

  10. jQuery的学习笔记4

    JQuery学习笔记3 2.9属性选择器 属性选择器就是根据元素的属性和属性值作为过滤条件,来匹配对应的DOM元素.属性选择器一般都以中括号作为起止分界符 它的形式如下: ［attribute］ ［a ...