react在安卓下输入框被手机键盘遮挡问题

最新推荐文章于 2023-06-08 20:41:30 发布

笛宴

最新推荐文章于 2023-06-08 20:41:30 发布

阅读量513

点赞数

分类专栏： react

本文链接：https://blog.youkuaiyun.com/qq_36528523/article/details/117065315

版权

本文介绍了一种在移动端网页中解决软键盘弹出导致页面内容被遮挡的方法。通过监听窗口尺寸变化，自动调整页面滚动位置，确保输入框始终可见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题概述

今天遇到了一个问题，在安卓手机上，当我要点击输入“姓名”时，手机软键盘弹出来把背景图片挤压变形了；整个手机窗口被压为原来的二分之一左右；

（左边一效果图） (右边一安卓效果图）

完整代码

componentDidMount() {
    this.pageInputScroll()
  }
  pageInputScroll() {
    let that =this
    let initWindowHeight=window.innerHeight
    setTimeout(() => {
      let wrapDiv=document.getElementsByClassName('refer1')[0]
      //console.log(wrapDiv.style)
      wrapDiv.style.minHeight =initWindowHeight+'px'
    }, 500);
    //由于我们不能直接知道软键盘什么时候出来，不过软键盘出来的时候窗口高度会缩小，所以我们可以通过监听窗口大小变化事件来判断软键盘是否弹出
    window.onresize=function(){ //如果浏览器窗口高度缩小25%以上，就认为是