uni-app android平台上 textarea组件设置auto-height后 内容输入过多导致高度增加被键盘遮住

截个图看看

楼下您看看

在 UniApp 中，textarea 组件在 Android 平台上设置 auto-height 后，当内容输入过多导致高度增加时，可能会被键盘遮挡。这是因为键盘弹出时，页面内容没有自动调整以适应键盘的高度。

为了解决这个问题，可以尝试以下几种方法：

方法一：使用 page.json 配置调整页面布局

在 page.json 中，可以配置页面的 softinputMode 属性，以调整键盘弹出时的页面布局。

{
  "path": "pages/yourPage",
  "style": {
    "navigationBarTitleText": "Your Page",
    "app-plus": {
      "softinputMode": "adjustResize"
    }
  }
}

adjustResize 会让页面内容在键盘弹出时自动调整高度，从而避免被键盘遮挡。

方法二：使用 uni.onKeyboardHeightChange 监听键盘高度变化

可以通过监听键盘高度的变化，手动调整 textarea 的位置或页面的布局。

uni.onKeyboardHeightChange(res => {
  const keyboardHeight = res.height;
  // 根据键盘高度调整页面布局
  // 例如，设置页面 paddingBottom 或调整 textarea 的位置
});

// 示例：调整页面 paddingBottom
const page = document.querySelector('.page');
page.style.paddingBottom = `${keyboardHeight}px`;

方法三：手动调整 textarea 的位置

在键盘弹出时，手动调整 textarea 的位置，使其不会被键盘遮挡。

uni.onKeyboardHeightChange(res => {
  const keyboardHeight = res.height;
  const textarea = document.querySelector('textarea');
  textarea.style.marginBottom = `${keyboardHeight}px`;
});

方法四：使用 scroll-view 包裹 textarea

将 textarea 放置在 scroll-view 中，当键盘弹出时，页面内容可以滚动，从而避免被键盘遮挡。

<scroll-view scroll-y="true" style="height: 100vh;">
  <textarea auto-height placeholder="请输入内容"></textarea>
</scroll-view>

方法五：使用 focus 事件手动调整

在 textarea 获得焦点时，手动调整页面的布局，使其不会被键盘遮挡。

methods: {
  handleFocus() {
    // 调整页面布局，例如设置页面 paddingBottom
    const page = document.querySelector('.page');
    page.style.paddingBottom = '300px'; // 根据实际情况调整
  }
}

<textarea auto-height placeholder="请输入内容" [@focus](/user/focus)="handleFocus"></textarea>