原生JS解决 安卓机 input/textarea输入键盘遮盖输入框
2019-03-29 15:58
1371 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ZuiChuDeQiDian/article/details/95681931
撸了今年阿里、网易和美团的面试,我有一个重要发现.......>>>
问题描述:
h5开发时,input/textarea输入框在安卓手机中,获取焦点时,键盘会直接在页面上方弹出,如果你的输入框刚好在页面下方就会被弹出的键盘遮挡,也无法向上滑动使其显示,如下图所示:
解决思路:
0.首先需要判断当前机型是否为安卓机(避免影响IOS端)
//判断是否是安卓还是ios isAndroid() { let u = navigator.userAgent; let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 return isAndroid === true; }
1.使其可以向上滑动显示:
"页面根节点"设置style样式:
<section id="root" style="height:100%;overflow:auto;"> html代码布局 ... 这里用textarea举例 input也是同样的 <textarea οnfοcus="onFocusAddr()"></textarea> </section>
2.当输入框获得焦点时,让页面滚动条至最底部:
//安卓键盘遮挡输入 onFocusAddr() { if (!isAndroid()) return;//判断是否是安卓机 setTimeout(() => { let div = document.getElementById("root");//获取根节点 div.scrollTop = div.scrollHeight;//滚动条至底(这里没有写的很严谨,需要减去输入框自身高offsetHeight,效果都一样) }, 500);//键盘拉起的延迟时间 }
问题解决,效果如下图:
相关文章推荐
- 原生js解决 IOS 6s机 input/textarea输入完成键盘拉回后页面不置顶
- 原生js实时监听input、textarea输入
- 原生JS 实现的input输入时表格过滤操作示例
- 原生JS 实现的input输入时表格过滤
- 解决在HTML中input或textarea中上下标不能正确输入问题,或在word中的上下标一复制到HTML的标签中就变成数字格式问题
- 移动端限制两位小数并且弹出数字键盘(解决使用H5S使用input[type='number']不兼容JS的问题)
- 原生js实现键盘控制div移动且解决停顿问题
- 原生js 实现input输入双向框绑定
- Js控制iphone端的input/textarea元素失去焦点时隐藏键盘
- 微信小程序在安卓机里input输入无显示,键盘点击完成,收起键盘才显示的原因
- input 默认数字键盘,并且通过 js 限制input中输入内容的数据格式
- React Native 键盘管理和 Tab Navigator 在Android TextInput遮盖,Tab Navigator上移等问题解决办法
- Js控制iphone端的input/textarea元素失去焦点时隐藏键盘
- IOS input输入时弹出键盘挤压页面,使页面失去焦点解决方法
- jquery/js实现文本框根据输入内容input,textarea自适应高度
- 原生js创建虚拟数字键盘输入
- JS验证控制输入中英文字节长度(input、textarea等)具体实例
- input与textarea实时监控,原生JS与JQ两种方法
- JS验证控制输入中英文字节长度(input、textarea等)具体实例
- Js控制iphone端的input/textarea元素失去焦点时隐藏键盘