微信小程序怎么让输入键盘弹起时让输入框在键盘的上方，避免输入框被键盘遮盖

可以使用`<input>`或`<textarea>`标签的`adjust-position`属性来解决这个问题。将`adjust-position`属性设置为`true`，就可以让输入框在键盘的上方，避免被键盘遮盖。

示例代码：

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

需要注意的是，`adjust-position`属性只在iOS 12.2及以上版本和Android P及以上版本中支持。在其他版本中，输入框可能仍然会被键盘遮盖。

相关问题

微信小程序怎么让输入键盘弹起时让输入框在键盘的上方，避免输入框被键盘遮盖，请给出完美的解决办法

可以使用官方提供的`wxpageScrollTo` API 来实现输入框弹起时自动滚动页面，从而避免输入框被键盘遮盖的问题。

具体实现步骤如下：

1. 在`<input>`或`<textarea>`标签中添加`focus`事件监听函数，用于在输入框被点击时触发滚动。

2. 在事件处理函数中获取输入框的位置信息，然后计算出滚动的距离，最后调用`wx.pageScrollTo` API 进行页面滚动。

下面是示例代码：

<textarea focus="{{focus}}" bindfocus="onFocus"></textarea>

Page({
  data: {
    scrollTop: 0
  },
  onFocus: function(e) {
    const query = wx.createSelectorQuery()
    query.select('#input').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function(res) {
      const inputHeight = res[0].height
      const scrollTop = res[1].scrollTop
      const windowHeight = wx.getSystemInfoSync().windowHeight
      const scrollHeight = scrollTop + inputHeight - windowHeight
      if (scrollHeight > 0) {
        wx.pageScrollTo({
          scrollTop: scrollHeight,
          duration: 300
        })
      }
    })
  }
})

需要注意的是，在调用`wx.pageScrollTo` API进行滚动时，需要设置`duration`参数，以便滚动动画更加平滑。同时，为了避免重复滚动，可以设置一个`scrollTop`变量来记录当前页面的滚动位置。

小程序怎么拿到软键盘的高度

### 获取微信小程序中软键盘的高度

在微信小程序开发过程中，处理软键盘弹出和隐藏对于用户体验至关重要。为了确保输入框不被软键盘遮挡并能动态调整界面布局，在 `input` 或者其他可编辑组件上可以监听特定事件来捕获软键盘的状态变化。

#### 使用 `bindkeyboardheightchange` 事件监听器

通过给需要响应键盘状态的元素绑定 `bindkeyboardheightchange` 事件，可以在每次软键盘高度发生变化时接收到通知，并从中提取当前键盘的高度值[^3]：

<input type="text" placeholder="请输入..." bindkeyboardheightchange="handleKeyboardHeightChange"/>

对应的 JavaScript 方法如下所示：

Page({
    handleKeyboardHeightChange(e) {
        const keyboardHeight = e.detail.height;
        console.log(`The current keyboard height is ${keyboardHeight}px`);
        
        // 更新页面样式或其他逻辑操作...
    }
})

需要注意的是，当用户手动关闭软键盘时，可能会遇到一个问题——即回调函数返回的高度并非预期中的零值而是之前打开过的键盘的实际尺寸。针对这种情况，可以通过监测输入域失去焦点 (`blur`) 的时机来进行修正，从而保证视图能够正确地重置其布局[^1]。

另外一种方法是在页面的数据模型里定义一个变量用于存储键盘高度，并将其应用到页面样式的计算属性中，以便实时更新界面位置[^4]：

/* wxml */
<textarea style="{{'bottom:' + keyBoardHeight + 'px; position: fixed;'}}"></textarea>

/* js */
data: {
    keyBoardHeight: 0,
},
methods:{
    onKeyboardHeightChange(event){
        this.setData({keyBoardHeight:event.detail.height});
    },
}

上述代码片段展示了如何基于获取到的键盘高度动态设置 `<textarea>` 距离屏幕底部的距离，防止因键盘显示而造成的内容遮盖现象。