您的位置:首页 > Web前端 > JavaScript

原生JS解决 安卓机 input/textarea输入键盘遮盖输入框

ZuiChuDeQiDian 2019-03-29 15:58 267 查看
版权声明:本文为博主原创文章,遵循 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);//键盘拉起的延迟时间
}

问题解决,效果如下图:

标签: 
相关文章推荐