uniapp textarea输入过程被键盘覆盖怎么解决？

在uniapp开发中，遇到textarea输入时内容被键盘遮挡的问题怎么解决？页面没有自动上推，导致输入框被键盘覆盖，看不到正在输入的内容。尝试过调整样式和布局，但效果不理想。请问有没有靠谱的解决方案或组件可以避免这种情况？需要支持iOS和安卓两端。

2 回复

在pages.json中给当前页面添加"app-plus": {"softinputMode": "adjustResize"}，让键盘弹出时页面自动上推。


在uni-app中，textarea输入时被键盘遮挡是常见问题，可通过以下方法解决：

1. 使用 cursor-spacing 属性

在 textarea 组件上设置 cursor-spacing 属性，确保输入光标与键盘保持指定距离（单位px）：

<textarea cursor-spacing="20"></textarea>

2. 动态调整页面布局

监听键盘高度变化，动态调整页面布局：

onKeyboardHeightChange(res) {
  // res.height 为键盘高度
  if (res.height > 0) {
    // 键盘弹出时调整布局（例如设置padding-bottom）
    this.keyboardHeight = res.height + 'px';
  } else {
    // 键盘收起时恢复
    this.keyboardHeight = '0';
  }
}

在 onLoad 中监听：

onLoad() {
  uni.onKeyboardHeightChange(this.onKeyboardHeightChange);
}

3. 使用 page-meta 根节点（H5端）

在H5端，可通过 page-meta 设置页面最小高度：

<page-meta :root-font-size="fontSize" page-style="min-height: 100vh;"></page-meta>

4. 滚动到可视区域

在输入框聚焦时，手动滚动页面使其可见：

onFocus() {
  // 获取输入框位置并滚动
  const query = uni.createSelectorQuery().in(this);
  query.select('#myTextarea').boundingClientRect(data => {
    uni.pageScrollTo({
      scrollTop: data.top,
      duration: 300
    });
  }).exec();
}

注意事项：

  • 不同平台（iOS/Android/H5）表现可能不同，需针对性测试
  • 部分机型可能需要结合 windowSoftInputMode 配置（App端在 manifest.json 中调整）
  • 优先使用 cursor-spacing，若无效再尝试动态布局方案

根据实际场景选择合适方案即可解决遮挡问题。

回到顶部