uni-app开发微信小程序时外框设置 position: fixed； 内部input输入框获取到焦点时，输入框中的文字会离开输入框

项目场景：

场景是要实现一个留言功能，当输入框获取焦点时，软键盘将弹框输入框弹起到顶部

问题描述

如果页面不在最顶部时，拉起软键盘后输入框内容会离开输入框！

原因分析：

原因应该是uniapp输入框被封装，虽然写的是input标签，但是编译后在浏览器中被div包含导致定位混乱，

---

解决方案：

当输入框获取焦点时，把页面锁死，当输入框失去焦点时，把页面解锁；
代码如下：
< template>
< view class=“pages” :class=“fasteningShow? ‘popup-show’: ‘’”>
< view class=“send-box” :style="[{ ‘bottom’:Height + ‘px’}]">
< view class=“input-box”>
<input class=“input-text” :show-confirm-bar=“false” :adjust-position=“false” @blur=“leaveInput”
@focus=“getHeight” type=“text” v-model=“comment” placeholder=“请输入反馈内容” />
< /view>
< button class=“send-but”> 发送 </ button>


</ template>

js部分：
data(){
return {
fasteningShow:false,
Height :0
}
}
methods: {
leaveInput(e) {
this.fasteningShow = false;
this.Height = 0; //输入框失去焦点时让距离底部距离为 0
},
//点击输入框触发
getHeight(e) {
this.fasteningShow = true;
console.log(e, ‘我是获取输入法高度的’)
this.Height = e.target.height; //获取输入法的高度，动态设置输入框距离顶部距离。
},
}
css:我用的sass:
methods: {
.pages.popup-show {
overflow: hidden !important;

}

//发送 模块
.send-box {
position:fixed;
background-color: #FFFFFF;
display: flex;
align-items: center;
padding: 18rpx 32rpx;
justify-content: space-between;
width: 686rpx;
height: 72rpx;

	.input-box {
		// background-color: #0081FF;
		width: 568rpx;
		height: 48rpx;
		padding-left: 20rpx;
		background: #F6F7F8;
		border-radius: 40rpx;
		padding: 12rpx 0rpx;

		.input-text {
			width: 100%;
			height: 48rpx;
			display: flex;
			align-items: center;
			font-size: 28upx;
			line-height: 34upx;
			padding-left: 28rpx;
		}

		.send-but {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			width: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

	}
}

.pages {
width: 100%;
height: 100%;
position: fixed;
overflow-y: auto;
background-color: #F9F9F9;
}

最后的结果：