点击输入框弹出键盘：如何解决uni-app微信小程序输入框遮挡问题？

前端

2023-12-25 16:12:47

解决微信小程序中输入框被软键盘遮挡的终极指南

在构建微信小程序时，你是否遇到过输入框被软键盘遮挡的恼人问题？这不仅会阻碍用户体验，还会严重影响输入效率。但别担心，本指南将带你一步步解决这一难题，让你轻松实现流畅的输入体验。

了解问题根源

当用户点击输入框触发焦点事件时，微信小程序会自动弹出软键盘。然而，默认情况下，软键盘会遮挡住输入框，使输入变得困难。

解决方案：调整输入框位置

为了解决这一问题，我们需要在软键盘弹出时调整输入框的位置，使其不会被遮挡。微信小程序提供了 adjustPosition() 方法，可以实现这一功能。

实现步骤

1. 创建输入框

在页面 wxml 文件中使用 <textarea> 标签创建输入框。

<textarea id="textarea" class="textarea-class" @focus="onInputFocus" placeholder="请输入文字" />

2. 监听输入框焦点事件

在页面 js 文件中添加 onInputFocus 方法来监听输入框的焦点事件。

methods: {
  onInputFocus() {
    // 代码实现
  }
}

3. 调整输入框位置

在 onInputFocus 方法中，使用 adjustPosition() 方法来调整输入框的位置。

adjustPosition() {
  // 代码实现
}

4. 代码示例

以下是针对 iOS 和 Android 平台的 adjustPosition() 方法的具体实现：

iOS 平台

adjustPosition() {
  wx.getSystemInfo({
    success: (res) => {
      const keyboardHeight = res.keyboardHeight;
      const textareaTop = document.getElementById('textarea').getBoundingClientRect().top;
      const textareaHeight = document.getElementById('textarea').getBoundingClientRect().height;
      const screenHeight = res.screenHeight;
      if (textareaTop + textareaHeight + keyboardHeight > screenHeight) {
        document.body.scrollTop = textareaTop - (screenHeight - keyboardHeight - textareaHeight);
      }
    }
  })
}

Android 平台

adjustPosition() {
  wx.getSystemInfo({
    success: (res) => {
      const keyboardHeight = res.keyboardHeight;
      const textareaTop = document.getElementById('textarea').getBoundingClientRect().top;
      const textareaHeight = document.getElementById('textarea').getBoundingClientRect().height;
      const screenHeight = res.screenHeight;
      if (textareaTop + textareaHeight + keyboardHeight > screenHeight) {
        document.body.scrollTop = textareaTop - (screenHeight - keyboardHeight - textareaHeight);
        window.scrollBy(0, textareaTop - (screenHeight - keyboardHeight - textareaHeight));
      }
    }
  })
}