问题

移动端浏览器中的表单在部分android机型上测试,点击靠下的输入框时会遇到弹出的软键盘挡住输入框问题

ios可自身弹起(ios自身的调整偶尔也会出问题,例如第三方键盘会遮挡,原因是第三方输入法的tool bar或者键盘也被当做可视区域,这里不做讨论)

问题分析及解决办法确立

最常见的是使用两个方法:scrollIntoViewIfNeeded()scrollIntoView(),使用方法自行百度。在我这里无效。

经测试发现android弹出键盘时有两种效果:

1.将activity挤压,键盘也占一部分activity空间;

2.键盘弹出在浏览器上面覆盖一层,不影响浏览器大小。

第二种会出现遮挡问题

于是想到以下两种方案:

1.通过动态增加页面高度设置scrollTop来使输入框到达合适的位置

2.设置相对定位,通过top来使输入框到达合适的位置

影响实现的两个点:

1.js拿不到键盘的弹出和收起事件;

2.覆盖一层的键盘弹出方式不会触发window.resize事件和onscroll事件。

解决

第一种经试验有些问题影响了实现,这里只讨论第二种。

直接上代码,这里是react项目(css设置absolute配合js改变top实现效果,transition过渡增强用户体验,这里就不放了)

  getElementOffsetTop(el) {
let top = el.offsetTop
let cur = el.offsetParent
while(cur != null){
top += cur.offsetTop
cur = cur.offsetParent
}
return top
} componentDidMount() {
const u = navigator.userAgent
const isAndroid=u.indexOf('Android')>-1||u.indexOf('Linux')>-1;//android终端
// alert('android'+isAndroid)
if(isAndroid){ // android统一处理,不影响ios的自身处理
const body = document.getElementsByTagName('body')[0] // 兼容获取body const regDom = document.querySelector('.wrapper_register') // 获取页面根元素
const content = document.querySelector('.content') // 表单内容部分 // const scrollHeight = body.scrollHeight // 网页文档高
// const scrollTop = body.scrollTop// 卷上去的高 const clientHeight = body.clientHeight //可见高
const fixHeight = clientHeight/3 // 定位高,弹出键盘时input距浏览器上部的距离,自己定义合适的 // 符合需弹出键盘的元素query
const queryStr = 'input[type="text"], input[type="tel"], input[type="password"], textarea'
const inputs = content.querySelectorAll(queryStr) // console.log(inputs) const offsetTopArr = Array.prototype.map.call(inputs,item=>{
return this.getElementOffsetTop(item) // offsetTop只能获取到顶部距它的offsetParent的距离,需此方法获取到元素距顶部的距离
}) inputs.forEach((item, i)=>{
item.addEventListener('focus',()=>{
// 改变top上移页面
regDom.style.top = '-' + (offsetTopArr[i] - fixHeight) + 'px'
}) item.addEventListener('blur',()=>{
// 恢复top
regDom.style.top = 0
})
})
}
}

效果基本实现,这里还有两个问题:

第一,如果下面的提交按钮是fixed,有些手机键盘弹出时会把按钮顶上来,如果上述代码中fixHeight设置不合适,会导致这个按钮遮挡输入框。所以为了统一效果,将底部按钮取消fixed,随页面滚动。

第二,如果点击键盘上的收起键盘按钮,会导致页面top无法恢复,因为没有触发输入框失焦方法,需点击空白处恢复。(目前没找到解决办法)

后续

1.由于android弹出键盘存在一定延迟,所以可以给top更改添加setTimeout,设置合适的延迟时间。

2.两个h5框架,iScroll、Native.js(虽然在这个问题上没啥用)

3.最终奥义:修改设计稿,三招 -> 使输入框不在页面的下半部分、采用分页设计、弹出输入层(ps:要和产品和设计沟通,客户不一定会让步 0.0)

希望大家斧正,交流更好地解决方案,谢谢

h5软键盘挡住输入框问题解决(android)的更多相关文章

  1. Android爬坑之旅:软键盘挡住输入框问题的终极解决方案

    前言 开发做得久了,总免不了会遇到各种坑.而在Android开发的路上,『软键盘挡住了输入框』这个坑,可谓是一个旷日持久的巨坑--来来来,我们慢慢看. 入门篇 Base 最基本的情况,如图所示:在页面 ...

  2. Android WebView 软键盘挡住输入框

    解决方法一: 在所在的Activity中加入 getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RES ...

  3. 安卓H5软键盘遮挡输入框

    由于安卓app内嵌入H5页面,webview对于软键盘没有处理(如果不是产品强烈要求建议不要处理这种拆东墙补西墙的问题,因为其他的手机上可能会出现已经优化软键盘的情况) 1.input下方还有多余空位 ...

  4. 点击底部input输入框,弹出的软键盘挡住input(苹果手机使用第三方输入法 )

    测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示:   input固定底部设计图.png 点击底部input输入框唤 ...

  5. Android各种键盘挡住输入框解决办法

    方法一:windowSoftInputMode:adjustResize和adjustPan 主要实现方法:在 AndroidManifest.xml 对应的Activity里添加 android:w ...

  6. Android软键盘与输入框的设置

    大家开发Android或者用app的时候会发现转到输入框就会自动弹出软键盘,切换别的页面就会自动的隐藏,下面几行代码用的熟练了就行了: 1.方法一(如果输入法在窗口上已经显示,则隐藏,反之则显示) I ...

  7. flutter TextField 输入框被软键盘挡住的解决方案

    以前搞ionic1~4的开发中 和react-native   flutter中的机制完全不同, 在flutter 中 当前页面如果存在元素被软键盘挡住 的情况 页面元素的最外层肯定得嵌套一层   S ...

  8. H5软键盘兼容方案

    前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...

  9. 可能这些是你想要的H5软键盘兼容方案

    前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...

随机推荐

  1. Oracle 数据库基础知识

    depyno 部门编号 部门表 dname 部门名称 location 地址----------------------------------------empno 员工编号 员工表ename 员工 ...

  2. web前端效率提升-nginx+nodejs搭建本地生态

    1.起因 编写的项目是一个偏向于后台管理的web系统,使用了angular框架,在绑定数据的时候就依赖于后台的接口格式. 以前是后台写好接口后,我在绑定,在这之前一些逻辑是没法做的,有时候后台接口给的 ...

  3. mysql 8.0~MGR多成员读一致性

    一 背景:当在读节点多成员查询时可能导致数据不一致 二 三种场景   1 读多写少  AFTER    2 读写相当  AFTER_AND_BEFORE   3 读少写多  BEFORE三 数据不一致 ...

  4. Could not find a package configuration file provided by "Qt5Widgets"

    解决: sudo apt install qttools5-dev

  5. # 20175333曹雅坤《Java程序设计》第2周学习总结

    教材学习内容总结 1.学习第二,三章ppt,并观看视频. 2.在虚拟机中连接到码云,克隆代码,编译与运行教材上的例子. 3.在虚拟机上安装相关配置,使其满足学习要求. 4.运行并截图上传监督学习脚本s ...

  6. 20175214 《Java程序设计》第8周学习总结

    20175214 <Java程序设计>第4周学习总结 前言:由于个人原因回家了两周,java学习进程落下了两周,且目前需交的实验报告较多,暂时无法补上前两次的博客,在将来会陆续补上,这次直 ...

  7. 如何使用Linux的Crontab定时执行PHP脚本的方法[转载]

    首先说说cron,它是一个linux下的定时执行工具.根用户以外的用户可以使用 crontab 工具来配置 cron 任务.所有用户定义的 crontab 都被保存在/var/spool/cron 目 ...

  8. [其它]iOS 12.2支持电信VoLTE了,中国电信教你如何开通:只要三步

    iOS 12.2支持电信VoLTE了,中国电信教你如何开通:只要三步 link :https://baijiahao.baidu.com/s?id=1629039609897267682&wf ...

  9. 全面剖析XMLHttpRequest对象

    XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础.尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用:但是,我们 ...

  10. ext window嵌jsp页面自适应

    //定义window调用方法传入jsp所需参数function getWindow(obj,obj1,obj2,obj3,obj4,obj5,obj6,obj7,obj8,obj9){ Ext.def ...