原生JS解决 安卓机 input/textarea输入键盘遮盖输入框
原生JS解决 安卓机 input/textarea输入键盘遮盖输入框
王念博客
发布于 2019-07-24 10:57:30
发布于 2019-07-24 10:57:30
问题描述：
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 onfocus="onFocusAddr()"></textarea>
</section>2.当输入框获得焦点时，让页面滚动条至最底部:
//安卓键盘遮挡输入
onFocusAddr() {
if (!isAndroid()) return;//判断是否是安卓机
setTimeout(() => {
let div = document.getElementById("root");//获取根节点
div.scrollTop = div.scrollHeight;//滚动条至底（这里没有写的很严谨，需要减去输入框自身高offsetHeight，效果都一样）
}, 500);//键盘拉起的延迟时间
}问题解决，效果如下图：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录