自定义app端、小程序端和H5等多端自定义键盘输入框,跟随系统键盘弹出和隐藏
2026/6/3 4:55:41 网站建设 项目流程

1.标签代码:

<textarea class="message-input":style="'position:fixed;z-index:999;'+(keyboardHeight>=0?'bottom:'+keyboardHeight+'rpx;':'bottom:'+'0rpx')"ref="input"v-model="newPostContent":auto-focus="keyboardHeight>=0|| messageInput":placeholder="answerName"confirm-type="search"@keyup.enter="submitMessage"@confirm="submitMessage"></textarea>

2.卸载键盘时取消监听:

onUnload(){// 页面卸载时取消监听uni.offKeyboardHeightChange();},

3.监听键盘高度:

// 监听键盘高度变化uni.onKeyboardHeightChange(res=>{this.keyboardHeight=res.height;if(this.keyboardHeight>0){this.keyboardHeight-=this.inputContainerHeight;// 加上输入区域自身高度,避免遮挡}console.log('当前键盘高度:',this.keyboardHeight);});

4.全局变量:

keyboardHeight:0,// 键盘高度inputContainerHeight:200// 输入区域自身高度,用于给主内容区设置底部paddingnewPostContent:'',// 评论内容

5.css

.message-input {
width: 86%;
display: inline-block;
height: 100rpx;
box-shadow: 0 2rpx 10rpx rgb(98, 98, 98,0.3);
background: rgba(255, 255, 255, 0.14);
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询