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

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

在微信小程序开发过程中，处理软键盘弹出和隐藏对于用户体验至关重要。为了确保输入框不被软键盘遮挡并能动态调整界面布局，在 `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>` 距离屏幕底部的距离，防止因键盘显示而造成的内容遮盖现象。