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 ...
随机推荐
- Leetcode_238_Product of Array Except Self
本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/48598939 Given an array of n in ...
- 数据准备<2>:数据质量检查-实战篇
上一篇文章:<数据质量检查-理论篇>主要介绍了数据质量检查的基本思路与方法,本文作为补充,从Python实战角度,提供具体的实现方法. 承接上文,仍然从重复值检查.缺失值检查.数据倾斜问题 ...
- HDFS的java api操作
hdfs在生产应用中主要是针对客户端的开发,从hdfs提供的api中构造一个HDFS的访问客户端对象,然后通过该客户端对象操作(增删改查)HDFS上的文件. 搭建开发环境 方式一(windows环境下 ...
- jQuery live()方法使用及变更（事件委托）
根据jQuery的官方描述,live方法在1.7中已经不建议使用,在1.9中删除了这个方法.并建议在以后的代码中使用on方法来替代. on方法可以接受三个参数:事件名.触发选择器.事件函数. 需要特别 ...
- 7. Selenium的基本使用
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 32.0px "PingFang SC" } span.s1 { font: 32.0p ...
- Flask框架之 --- 我的第一个个人网站(雏形)
现在还是个静态网站 , 而且这里的Flask也只是起到了提供虚拟web服务器的作用 , 下一步是实现数据库的连接 , 实现简单的动态访问.
- 重构：以Java POI 导出EXCEL为例
重构 开头先抛出几个问题吧,这几个问题也是<重构:改善既有代码的设计>这本书第2章的问题. 什么是重构? 为什么要重构? 什么时候要重构? 接下来就从这几个问题出发,通过这几个问题来系统的 ...
- 得到Android keystore签名的命令方法
keytool -list -v -keystore keyfile.jks 上面这个命令是用来得到一些签名字符串,这些字符串用来在各种平台上填资料的 再来个手动签名的命令: jarsigner -v ...
- nltk download失败
之前在台式机win10的系统,python 2.7,用的pycharm执行nltk download(),很顺利.然而到了我的笔记本只是换个一个win8的系统,Python的配置都是一样的,但是这时候 ...
- Java数组的复制全解
1.将一个基本数据类型数组的引用赋值给另一个数组 public class Array_copy { int[] array1=new int[]{1,2,3,4,5,6}; int[] array2 ...