uni-app <textarea>组件首次聚焦时被键盘遮挡问题 必现 后面不会再出现

在 uni-app 中，使用 <textarea> 组件时，首次聚焦时可能会遇到键盘遮挡输入框的问题。这是因为在首次聚焦时，页面布局可能还没有完全适应键盘的弹出，导致输入框被键盘遮挡。而后续聚焦时，由于布局已经调整过，所以问题不再出现。

解决方案

1. 使用 adjust-position 属性

<textarea> 组件提供了一个 adjust-position 属性，用于控制当键盘弹出时是否自动调整页面的位置，以避免输入框被键盘遮挡。默认情况下，adjust-position 是开启的，但你可以显式地设置它以确保其生效。

<textarea adjust-position="true"></textarea>

2. 手动调整页面位置

如果 adjust-position 属性不能完全解决问题，你可以手动监听键盘的弹出事件，并在键盘弹出时调整页面的滚动位置。

export default {
  methods: {
    onFocus() {
      // 手动调整页面滚动位置
      uni.pageScrollTo({
        scrollTop: 200, // 根据实际情况调整
        duration: 300
      });
    }
  }
}

然后在 <textarea> 上绑定 focus 事件：

<textarea @focus="onFocus"></textarea>

3. 使用 uni.onKeyboardHeightChange 监听键盘高度变化

你可以通过监听键盘高度变化来动态调整页面布局，避免输入框被键盘遮挡。

export default {
  data() {
    return {
      keyboardHeight: 0
    };
  },
  mounted() {
    uni.onKeyboardHeightChange(res => {
      this.keyboardHeight = res.height;
      this.adjustPagePosition();
    });
  },
  methods: {
    adjustPagePosition() {
      // 根据键盘高度调整页面滚动位置
      uni.pageScrollTo({
        scrollTop: this.keyboardHeight, // 根据实际情况调整
        duration: 300
      });
    }
  }
}

4. 使用 scroll-into-view 属性

在某些情况下，你可以使用 scroll-into-view 属性来确保输入框在聚焦时自动滚动到可视区域。

<textarea scroll-into-view="inputId"></textarea>