专栏首页王念博客原生JS解决 安卓机 input/textarea输入键盘遮盖输入框

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

问题描述:

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);//键盘拉起的延迟时间
}

问题解决,效果如下图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 挥别web移动端开发差异和经典坑

    在 iOS Safari (其他浏览器和 Android 均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如:

    张炳
  • 移动端H5页面开发坑点指南

    前言 在平时的H5移动端开发时,我们难免会遇到各种各样的坑点,这篇文章就带着大家来看看怎么解决,文章较长,建议收藏方便以后查阅!

    Javanx
  • 微信H5页面兼容性解决方案

    最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了。

    coder_koala
  • 【H5】344- 微信 H5 页面兼容性解决方案

    当点击输入的时候,光标的高度和父盒子的高度一样。例如下图,左图是正常所期待的输入框光标,右边是ios的input光标。

    pingan8787
  • 微信 H5 页面兼容性解决方案

    最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了。

    ConardLi
  • h5软键盘挡住输入框问题解决(android)

    在部分android机型上测试点击靠下的输入框时遇到弹出的软键盘挡住输入框问题,ios可自身弹起(ios自身的调整偶尔也会出问题,例如第三方键盘会遮挡,原因是第...

    mcq
  • 移动端那些戳中你痛点的软键盘问题及解决方法

    在ios手机中,当页面中包含有输入框时,点击输入框,键盘弹起,会让页面中被fixed的元素失效。所以造成了底部吸底和顶部吸顶的元素错位的问题。下面的视频中就出现...

    wade
  • H5端软键盘把footer底部导航栏顶上去了怎么解决?

    这个问题是WebApp的通病,特别是用了BootStrap的底部导航栏,又用了input选中时自动移到合适位置,避免软键盘覆盖的时候,会特别明显。

    崔文远TroyCui
  • 【H5】209-可能这些是你想要的H5软键盘兼容方案

    作者最近一段时间在做 H5 聊天项目,过程中踩过一个大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上。需求很明确,看似很简单,其实不然。作者...

    pingan8787

扫码关注云+社区

领取腾讯云代金券