Taro项目H5端输入框聚焦时页面错位，怎么解决？

这个问题在H5端比较常见，特别是在使用Taro这类跨端框架时，输入框聚焦触发软键盘会导致页面布局被挤压错位，尤其是底部固定元素容易被顶起来甚至溢出屏幕。

常见的解决方案有两个方向：

---

### 1. 强制页面保持滚动能力（推荐）

给 加上固定高度和 overflow: hidden，同时外层容器使用 scroll 来接管滚动行为，避免浏览器默认的视口缩放行为影响布局：

html, body {

  height: 100%;

  margin: 0;

  overflow: hidden; /* 阻止默认滚动 */

}



.container {

  display: flex;

  flex-direction: column;

  height: 100vh;

  overflow: hidden;

}



.form {

  flex: 1;

  overflow-y: auto;

  -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */

}

这样可以防止输入框聚焦时页面整体被顶上去。

---

### 2. 监听输入框聚焦状态，动态调整布局

Taro 中可以使用 onFocus 和 onBlur 来监听输入框状态，当聚焦时将底部 TabBar 隐藏或者调整其样式，避免被顶起：

import { useState } from 'react';



export default function Index() {

  const [isInputFocused, setIsInputFocused] = useState(false);



  return (

    <view className="container">

      <view className="form">

        <input

          className="input"

          placeholder="输入内容"

          onFocus={() => setIsInputFocused(true)}

          onBlur={() => setIsInputFocused(false)}

        />

      </view>

      {!isInputFocused && <view className="tabbar">底部导航</view>}

    </view>

  );

}

这样在输入时隐藏 TabBar，可以避免布局错位的问题。

---

### 附加建议

- 使用 position: fixed 的 TabBar 时容易出问题，建议改为 position: absolute 并放在容器底部。
- H5端的 height: 100vh 在软键盘弹出时会变化，可以用 window.innerHeight 做动态适配，但比较复杂。

这两个方案配合使用基本可以解决大部分 H5 输入框聚焦导致的布局错位问题。

这个问题确实是H5端常见的坑，尤其是固定底部的TabBar场景。官方文档里提到过，浏览器在输入框聚焦时会调整视口以确保键盘不遮挡输入框，这会导致页面布局被挤压。

直接给个可行方案：你可以通过监听输入框的focus和blur事件，动态调整页面的高度和定位。具体做法是在输入框聚焦时，将.container的高度改为auto，同时给.tabbar加上position: fixed。

代码示例如下：

class Test extends Component {

  handleFocus = () => {

    document.querySelector('.container').style.height = 'auto'

    document.querySelector('.tabbar').style.position = 'fixed'

    document.querySelector('.tabbar').style.bottom = '0'

  }



  handleBlur = () => {

    document.querySelector('.container').style.height = '100vh'

    document.querySelector('.tabbar').style.position = 'static'

  }



  render() {

    return (

      <view class="container">

        <view class="form">

          <input 

            className="input" 

            placeholder="输入内容" 

            onFocus={this.handleFocus} 

            onBlur={this.handleBlur}

          />

        </view>

        <view class="tabbar">底部导航</view>

      </view>

    )

  }

}

这种方式兼容性比较好，iOS和Android都能解决。不过要注意的是，如果页面内容比较多，可能还需要额外处理滚动条的问题。虽然有点麻烦，但这是目前比较稳妥的方案了。