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 ...
随机推荐
- Android BLE与终端通信（一）——Android Bluetooth基础API以及简单使用获取本地蓝牙名称地址
Android BLE与终端通信(一)--Android Bluetooth基础API以及简单使用获取本地蓝牙名称地址 Hello,工作需要,也必须开始向BLE方向学习了,公司的核心技术就是BLE终端 ...
- 史上最简单的C语言链表实现，没有之一
#include <stdio.h> #include <string.h> #include <stdlib.h> #define NR(x) (sizeof(x ...
- Oracle与Mysql时间格式化
一,Oracle格式化时间: Oracle 获取当前日期及日期格式 获取系统日期: SYSDATE() 格式化日期: TO_CHAR(SYSDATE(),'YY/MM/DD HH24: ...
- RecyclerView 与 Scrollview 搭配使用的两个坑
RecyclerView & Scrollview & wrap_content RecyclerView wrap_content 用android.support.v4.widge ...
- 如何用Python网络爬虫爬取网易云音乐歌曲
今天小编带大家一起来利用Python爬取网易云音乐,分分钟将网站上的音乐down到本地. 跟着小编运行过代码的筒子们将网易云歌词抓取下来已经不再话下了,在抓取歌词的时候在函数中传入了歌手ID和歌曲名两 ...
- 深入浅出JWT(JSON Web Token )
1. JWT 介绍 JSON Web Token(JWT)是一个开放式标准(RFC 7519),它定义了一种紧凑且自包含的方式,用于在各方之间以JSON对象安全传输信息. 这些信息可以通过数字签名进行 ...
- 用 Javascript 实现的“Dual listbox”(双向选择器)
这是我用 Javascript 制作的"Dual listbox"(双向选择器)的一个应用示例,是从我的代码中抠出来的.在网页编程中经常会用到. 也许我的实现太烦琐了,希望大家有更 ...
- oracle dmp数据导入
11.245.2.55 root:root su - pams --注意pams前面的空格 /cnaps2/pams/backup exp_pams_20141219.dmp drop tab ...
- 学习jQuery必须知道的几种常用方法
jQuery事件处理 ready(fn) 代码: $(document).ready(function(){ // Your code here...}): 作用:它可以极大地提高web应用程序的响 ...
- SQL遇到的问题
1.问题描述:拼接sql字符串涉及到表变量时报错. 解决办法:把表变量的定义一同放在字符串中. 2.问题描述:EF添加实体后,调用存储过程调用不到 解决办法:必须先db.SaveChanges()后 ...