资讯专栏INFORMATION COLUMN

iOS Android中 h5键盘遮挡输入框的问题和解决方案

Nekron / 1934人阅读

摘要:问题发现在部分机型和部分系统下键盘会出现遮挡输入框的情况壳内。如果输入框是固定在底部的,则不能通过这个方法解决。目前应对方案设计的时候尽量规避此类问题将输入框做成原生组件,由客户端去控制针对有问题的版本,用去填充

问题发现:在 Android 部分机型 和 iOS部分系统下 键盘会出现遮挡输入框的情况(壳内)。
问题解决:

Android

经过测试,Android 的6.0版本以上均会出现改问题,归根到底是之前的同学集成沉浸式的时候,没有评估到 h5 页面有输入框也会引起这个遮挡现象,没有打补丁。现在客户端已通过发版解决。

相关资料:

https://juejin.im/post/5a25f6...

https://stackoverflow.com/que...

IOS

经过测试IOS在11.1 、11.2这两个版本下,scrollIntoView()方法无效。如果输入框是固定在底部的,则不能通过这个方法解决。

目前应对方案:

设计的时候尽量规避此类问题

将输入框做成原生组件,由客户端去控制

针对有问题的版本,用padding去填充

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

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

相关文章

  • iOS Android h5键盘遮挡输入框的问题解决方案

    摘要:问题发现在部分机型和部分系统下键盘会出现遮挡输入框的情况壳内。如果输入框是固定在底部的,则不能通过这个方法解决。目前应对方案设计的时候尽量规避此类问题将输入框做成原生组件,由客户端去控制针对有问题的版本,用去填充 问题发现:在 Android 部分机型 和 iOS部分系统下 键盘会出现遮挡输入框的情况(壳内)。问题解决: Android 经过测试,Android 的6.0版本以上均会...

    cucumber 评论0 收藏0
  • iOS Android h5键盘遮挡输入框的问题解决方案

    摘要:问题发现在部分机型和部分系统下键盘会出现遮挡输入框的情况壳内。如果输入框是固定在底部的,则不能通过这个方法解决。目前应对方案设计的时候尽量规避此类问题将输入框做成原生组件,由客户端去控制针对有问题的版本,用去填充 问题发现:在 Android 部分机型 和 iOS部分系统下 键盘会出现遮挡输入框的情况(壳内)。问题解决: Android 经过测试,Android 的6.0版本以上均会...

    lx1036 评论0 收藏0
  • 可能这些是你想要的H5键盘兼容方案

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

    stackvoid 评论0 收藏0
  • 可能这些是你想要的H5键盘兼容方案

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

    imingyu 评论0 收藏0
  • (2016-11-04完美解决)移动端iOS第三方输入遮挡底部input及android键盘回落后

    摘要:问题概述问题移动端输入框键盘唤起后定位好的元素跟随页面滚动了起来属性失效了满屏任性横飞如下图问题有第三方输入法的机还会出现键盘弹出延迟,导致普通布局输入框等位置靠下的被键盘挡住如下图这个完成出来然后键盘再顶起完美解决方案在输入框获取焦点 问题概述 问题1:H5 web 移动端 输入框, 键盘唤起后fixed定位好的元素跟随页面滚动了起来… fixed属性失效了!满屏任性横飞, 如下图:...

    Simon 评论0 收藏0

发表评论

0条评论

Nekron

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<