解决Android软键盘弹出覆盖h5页面输入框问题

2024-09-26 18:04:58

之前我们在使用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页面输入框问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

5种方法完美解决android软键盘挡住输入框方法详解

在开发中,经常会遇到键盘挡住输入框的情况,比如登录界面或注册界面,弹出的软键盘把登录或注册按钮挡住了,用户必须把软键盘收起,才能点击相应按钮,这样的用户体验非常不好.像微信则直接把登录按钮做在输入框的上面,但有很多情况下,这经常满足不了需求.同时如果输入框特别多的情况下,点击输入时,当前输入框没被挡住,但是当前输入框下面的输入框却无法获取焦点,必须先把键盘收起,再去获取下面输入框焦点,这样用户体验也非常不好,那有什么办法呢? 系统的adjustResize和adjustPan有什么区别,他们使
Android仿支付宝自定义密码输入框及安全键盘(密码键盘)

0.前言之前做过的项目里有运用到一个支付场景:用户办理业务时需要输入交易密码,并且可根据平台下发的支付方式进行选择.这与支付宝的密码输入方式十分相似,如果使用Android系统或者第三方软件的键盘,会有密码泄露的风险.因此,大多数的应用软件使用的是自定义的密码输入框及安全键盘. 由于密码输入方式需要实现一个从底部弹出的效果,因此总体上决定采用BottomSheetDialog来进行封装,同时为了提高安全性,还应该随机生成键盘上的数字,界面如下图所示: 首先新建一个PasswordInpu
Android软键盘挡住输入框的终极解决方案

前言开发做得久了,总免不了会遇到各种坑. 而在Android开发的路上,『软键盘挡住了输入框』这个坑,可谓是一个旷日持久的巨坑--来来来,我们慢慢看. 入门篇最基本的情况,如图所示:在页面底部有一个EditText,如果不做任何处理,那么在软键盘弹出的时候,就有可能会挡住EditText. 对于这种情况的处理其实很简单,只需要在AndroidManifest文件中对activity设置:android:windowSoftInputMode的值adjustPan或者adjustResize即
android仿微信支付宝的支付密码输入框示例

大家好,我是狸小华,萌汉子一枚.今天给大家带来的是仿微信/支付宝的密码输入框.这个效果也出来有一段时间了,所以搜索一下还是有不少的网友实现,但是,但是!经过一番查看后,我发现他们的实现分为两大类. 一,直接继承EditText,然后在ondraw里面做文章:二,EditText外面包一个viewGroup.我不喜欢这两种实现方式,觉着有些臃肿了,所以我详细介绍下我的实现方式:直接继承View,获取用户的输入,然后draw出来. 我们实现的是上面的密码输入框,这个键盘...系统自带的哦,调用用户输
java swing实现QQ账号密码输入框

本文实例为大家分享了Java swing 仿QQ账号密码输入框,供大家参考,具体内容如下主要思路是自己定义 AccountPanel 和 PasswordPanel 类,继承JPanel,通过 paintComponent(Graphics g) 方法重绘面板,实现目标样式. 先上效果图正常显示效果: 鼠标放在控件上时的效果: 腾讯QQ登录界面的账号密码输入部分效果比对: 下面直接给出代码吧 AccountPanel: import java.awt.BasicStroke; import
Android高级xml布局之输入框EditText设计

今天给大家介绍一下如何实现一款简约时尚的安卓登陆界面.大家先看一下效果图当用户输入时动态出现删除按钮现在先罗列一下技术点: 1.如何使用圆角输入框和按钮背景 2.如何实现"手机号"."密码"后面的竖线 3.如何嵌套输入框的布局 4.如何监听输入框的输入事件及删除按钮的动态显示隐藏 1.如何使用圆角输入框和按钮背景安卓为开发者准备了shape这个xml标签,用于自定义一些形状. 那么我就来定义一个白色的输入框背景.代码如下:
Android实现动态显示或隐藏密码输入框的内容

本文实例展示了Android实现动态显示或隐藏密码输入框内容的方法,分享给大家供大家参考之用.具体方法如下: 该功能可通过设置EditText的setTransformationMethod()方法来实现隐藏密码或者显示密码. 示例代码如下: private Button mBtnPassword; private EditText mEtPassword; private boolean mbDisplayFlg = false; /** Called when the activity is
Android 仿支付宝密码输入框效果

模仿支付宝输入效果,实现很简单,就是画个矩形框和圆形,其他的通过组合view来实现所有功能,虽然简单但是封装起来,方便以后使用,也分享一下,希望对别人也有点帮助. 1.如何使用,可以设置自己的进入退出动画,不设置则没有动画效果,自己觉得封装之后还是非常用好的. private MyInputPwdUtil myInputPwdUtil; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(sa
javascritp实现input输入框相关限制用法

1.取消按钮按下时的虚线框在input里添加属性值 hideFocus 或者 HideFocus=true 2.只读文本框内容在input里添加属性值 readonly 3.防止退后清空的TEXT文档(可把style内容做做为类引用) <INPUT style=behavior:url(#default#savehistory); type=text id=oPersistInput> 4.ENTER键可以让光标移到下一个输入框 <input onkeydown="
Android UI设计系列之自定义EditText实现带清除功能的输入框(3)

最近公司的产品在陆续做升级,上级领导给的任务是优化代码结构以及项目架构,力争把项目写的精巧简练,于是我们满工程找冗余... 我们都知道每一个项目基本上都是有登陆页的,在登陆页中肯定是少不了输入框了,当我们在输入框中输入数据后如果输入的内容不正确或者是错误的或者是想重新输入,如果嗯键盘上的删除键就得一个一个的去删除,这时候我们或许就想要是能有一个标记当点击了这个标记能把我们刚刚输入的内容清空就好了.这样可以极大的提升用户体验,就拿QQ的登陆来说吧,效果如下: 当点击密码框右侧的小×图标时输入的内容
Android文本输入框(EditText)输入密码时显示与隐藏

代码很简单,这里就不多废话了. 复制代码代码如下: package cc.c; import android.app.Activity; import android.os.Bundle; import android.text.Selection; import android.text.Spannable; import android.text.method.HideReturnsTransformationMethod; import android.text.method.Passw

解决Android软键盘弹出覆盖h5页面输入框问题

相关推荐

随机推荐