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软键盘弹出的时候,android整个界面上移,布局被挤压,很难看:要解决这个问题,我们需要用到 windowSo ...
- android软键盘弹出引起的各种不适终极解决方案
android软键盘弹出引起的各种不适终极解决方案 以下描述如何解决ListView高度小于0时出现的UI问题. 创建RelativeLayout的子类TxrjRelativeLayout publi ...
- Android软键盘弹出时布局问题
最近项目需要做一个类似聊天室的模块,基于Socket实现的,这部分稍后一段时间再做总结,功能上的相关点都实现了小例子也做出来了,最后发现一个比较腻歪的问题就是软键盘弹出时总是会把标题“挤出”屏幕,(无 ...
- 小米note3，华为手机，软键盘弹出之后，页面上定位的元素布局会乱掉
原因:可能是因为,软键盘弹出时,改变了height,使height:100%,不能达到原来的高度. 解决办法: $(document).ready(function () { $('body').he ...
- Android 软键盘弹出时把原来布局顶上去的解决方法
键盘弹出时,会将布局底部的导航条顶上去. 解决办法: 在mainfest.xml中,在和导航栏相关的activity中加: <activity android:name=& ...
- Android软键盘弹出时把布局顶上去的解决方法
原文: 解决Andriod软键盘出现把原来的布局给顶上去的方法(转) 链接:http://blog.sina.com.cn/s/blog_9564cb6e0101g2eb.html 决方法,在main ...
- Android 软键盘弹出时把布局顶上去，控件乱套解决方法
解决办法:方法一:在你的activity中的oncreate中setContentView之前写上这个代码getWindow().setSoftInputMode(WindowManager.Layo ...
- android软键盘弹出隐藏的监听
通过网上搜索关于软键盘的隐藏弹出的监听,有几种方式,其中最有效的方式是在View的Onlayout()里面做文章 具体代码: 将布局视图自定义,重写onlayout()方法,然后在主Activity里 ...
- edittext禁止android软键盘弹出
1. EditText ed=(EditText) findViewById(R.id.test); ed.clearFocus(); 2. 在AndroidMainfest.xml中选择哪个acti ...
随机推荐
- 拆轮子之Fish动画分析
概述 最近发现一个很好玩的动画库,纯代码实现的而不是通过图片叠加唬人的,觉得很有意思看了下源码https://github.com/dinuscxj/LoadingDrawable, 这个动画效果使用 ...
- C语言之linux内核可变参实现printf,sprintf
昨天,我发表了一篇用可变参实现的fprintf函数,其实说实话还不完全是可变参实现的,因为用到了FILE * 这样的指针,需要包含stdio.h这个头文件才能实现这个函数,今天我们就来看看,如何抛弃s ...
- 理解java值传递与引用传递
1.基本类型和引用类型在内存中的保存 Java中数据类型分为两大类,基本类型和对象类型.相应的,变量也有两种类型:基本类型和引用类型.基本类型的变量保存原始值,即它代表的值就是数值本身:而引用类型的变 ...
- 鹅厂优文|打通小程序音视频和webRTC
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:腾讯视频云终端技术总监常青, 2008 年毕业加入腾讯,一直从事客户端研发相关工作,先后参与过 PC QQ.手机QQ.QQ物联 等产品 ...
- 《转》iOS 平台 Cocos2d-x 项目接入新浪微博 SDK 的坑
最近在做一个 iOS 的 cocos2d-x 项目接入新浪微博 SDK 的时候被“坑”了,最后终于顺利的解决了.发现网上也有不少人遇到一样的问题,但是能找到的数量有限的解决办法写得都不详细,很难让人理 ...
- 学习MQ（一） 感知
声明:我的文字里出现的MQ,如没有特殊指明,就是指的IBM的websphere MQ 以前对MQ一无所知! MQ是IBM websphere的系列产品之一,是很好的一个中间件产品.其实我对这列产品并不 ...
- Jbpm工作流（一）
了解一下什么是Jbpm及特点. jBPM,全称是Java Business Process Management,是一种基于J2EE的轻量级工作流管理系统.jBPM是公开源代码项目,它使用要遵循 Ap ...
- JavaScript四（DOM编程）
一.绪论 DOM是文档对象模型(Document Object Module)的简称,借助DOM模型,可以将结构化文档,转换成DOM树,程序可以访问,修改,增加,删除树的节点.程序通过操作DOM树时, ...
- Java 8 基础教程 - Predicate
在Java 8中,Predicate是一个函数式接口,可以被应用于lambda表达式和方法引用.其抽象方法非常简单: /** * Evaluates this predicate on the giv ...
- python3学习笔记2---引用http://python3-cookbook.readthedocs.io/zh_CN/latest/2
2018-03-01数据结构和算法(2) 1.6字典中的键映射多个值 一个字典就是一个键对应一个单值的映射.如果你想要一个键映射多个值,那么你就需要将这多个值放到另外的容器中, 比如列表或者集合里面. ...