uniapp开发抖音小程序监听键盘弹起keyboardheightchange，并获取键盘高度（全网第一唯一成功案例，你问ai都没用）

一只花小妖2024-04-16 19:46

废话不多说，今天也是整上了uniapp开发小程序适配抖音端，由于项目需要做出点击输入框，键盘顶起输入框的效果，所以需要监听到键盘弹起，然后获取键盘的高度，作为属性设置到输入框的css样式当中，方可达到需求效果。

然而，抖音小程序并不支持onKeyBoardHeightChange事件，如果你妄图使用这个api，很遗憾并且很明确的告诉你，根本没有什么吊用。

最开始，我是打算问ai直接拿到解决方案，但是ai并非万能的，它就连抖音小程序文档中的input相关事件有个bindkeyboardheightchange都不懂，只会叫你去调uniapp的onKeyBoardHeightChange。

在之后，我去浏览了抖音小程序的相关文档，发现input的event中有一个bindkeyboardheightchange,最开始，我以为看到了曙光，直接去使用，然而，很遗憾又踩了一次坑，直接使用它根本不会触发。

在这个时候，我已经打算放弃了，又去了github和uniapp的插件商城寻是否有第三方库或者插件，能够直接获取到键盘高度，然而找了一圈并没有找到。

之后，我抱着试一试的心态，想着试一试this.$nextTick,没想到，成了！

代码如下：

template中：

重点在keyboardheightchange，其他的代码不用管

html 复制代码

	<input :adjust-position="false" v-model="msg" class="dh-input" type="text" @confirm="confirmMessage"
					@keyboardheightchange="handleKeyboardChange" placeholder-style="color:#999999;" confirm-type="send"
					placeholder="输入你想说的话～" />

script中：

javascript 复制代码

	handleKeyboardChange(e) {
				this.$nextTick(() => {
					// console.log("弹起了！", e); 
					this.changeKeyBordHeight(e.detail.height) //键盘的高度就是e.detail.height
				})

			}

如果我的这篇文章能够帮助当前正在困惑的你，请不要忘记帮我点个小赞赞哦！