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

gclove 发布于2019-08-30 15:54 / 3166人阅读

摘要：代码调试去除的，给添加一个正好能让软键盘弹出后遮住输入框的高度，高度软键盘出现后高度输入框高度保存按钮高度，发现键盘弹出遮挡着后，框会自动上移到可视区内，问题定位成功。

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

移动端开发过程中，我们经常遇到h5表单录入页面，在Android系统webview中，由于软键盘弹出，导致覆盖 h5页面输入框问题，在此进行回顾并分享给大家

系统：Android

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

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

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

问题分析:

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

h5页面测试代码如下：

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

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);
     }
});

私有云 idc机房托管输入界面软键盘 android软键盘 android实现软键盘 qt软键盘android

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117095.html

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

摘要：代码调试去除的，给添加一个正好能让软键盘弹出后遮住输入框的高度，高度软键盘出现后高度输入框高度保存按钮高度，发现键盘弹出遮挡着后，框会自动上移到可视区内，问题定位成功。 Android软键盘弹出，覆盖h5页面输入框问题移动端开发过程中，我们经常遇到h5表单录入页面，在Android系统webview中，由于软键盘弹出，导致覆盖 h5页面输入框问题，在此进行回顾并分享给大家系统：An...

URLOS 2019-08-02 13:56 评论0 收藏0
Android软键盘弹出，覆盖h5页面输入框问题

摘要：代码调试去除的，给添加一个正好能让软键盘弹出后遮住输入框的高度，高度软键盘出现后高度输入框高度保存按钮高度，发现键盘弹出遮挡着后，框会自动上移到可视区内，问题定位成功。 Android软键盘弹出，覆盖h5页面输入框问题移动端开发过程中，我们经常遇到h5表单录入页面，在Android系统webview中，由于软键盘弹出，导致覆盖 h5页面输入框问题，在此进行回顾并分享给大家系统：An...

Honwhy 2019-08-23 14:12 评论0 收藏0
Android软键盘弹出，覆盖h5页面输入框问题

摘要：代码调试去除的，给添加一个正好能让软键盘弹出后遮住输入框的高度，高度软键盘出现后高度输入框高度保存按钮高度，发现键盘弹出遮挡着后，框会自动上移到可视区内，问题定位成功。 Android软键盘弹出，覆盖h5页面输入框问题移动端开发过程中，我们经常遇到h5表单录入页面，在Android系统webview中，由于软键盘弹出，导致覆盖 h5页面输入框问题，在此进行回顾并分享给大家系统：An...

flybywind 2019-08-05 15:49 评论0 收藏0
可能这些是你想要的H5软键盘兼容方案

摘要：然而，并没有直接监听软键盘的原生事件，只能通过软键盘弹起或收起，引发页面其他方面的表现间接监听，曲线救国。软键盘收起表现触发输入框以外的区域时，输入框失去焦点，软键盘收起。可以让软键盘弹起后，让焦点元素再次滚到可视区，强迫滚到位。前言最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从...

stackvoid 2019-08-23 17:05 评论0 收藏0
可能这些是你想要的H5软键盘兼容方案

摘要：然而，并没有直接监听软键盘的原生事件，只能通过软键盘弹起或收起，引发页面其他方面的表现间接监听，曲线救国。软键盘收起表现触发输入框以外的区域时，输入框失去焦点，软键盘收起。可以让软键盘弹起后，让焦点元素再次滚到可视区，强迫滚到位。前言最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从...

imingyu 2019-08-05 16:47 评论0 收藏0