uniapp微信小程序开发如何解决input框或者(textarea)框输入时界面被顶起,输入法遮盖输入框的问题?
最近在写微信小程序开发,客服吐槽,点击输入时界面总是被顶起来,输入框也被遮挡了一半,以下是解决方案。
首先将输入框设置为不向上顶页面的参数如下
输入框参数
:adjust-position="false" //键盘弹起时,是否自动上推页面 默认的是true 将其改为false
:show-confirm-bar="false" //这个是是否显示完成按钮的 默认也是true 我这边不需要,看情况设置
@focus="getHeight" //输入框聚焦的时候触发 里面是触发的方法名称 可以自行设置
@blur="leaveInput" //输入框失去焦点时触发 里面是失去焦点触发的方法名称 可以自行设置
placeholder="请输入反馈内容" //输入框为空时提示语
:auto-height="true" //是否自动增高 默认为false 我这边需要根据内容增高输入框所以设置为true
输入框html界面
<!-- 下发发送模块 -->
<view class="send-box" @touchmove.stop.prevent="moveStop" v-show="isSendShow" :style="[{ 'bottom':Height + 'px'}]">
<view class="input-box">
<textarea class="input-text" :auto-height="true" :show-confirm-bar="false" :adjust-position="false" @blur="leaveInput" @focus="getHeight" type="text" v-model="comment" value="" placeholder="请输入反馈内容" />
</view>
<view class="send-but" @click.stop="postfeedback">
发送
</view>
</view>
输入框css 此处用的是scss
//发送 模块 .send-box {
position: fixed;
width: 100%;
background-color: #FFFFFF;
display: flex;
align-items: center;
padding: 18upx 32upx;
justify-content: space-between; .input-box {
// background-color: #0081FF;
width: 90%;
min-height: 64upx;
max-height: 600upx;
background: #F4F4F4;
border-radius: 40upx;
padding: 15upx 0upx; .input-text {
width: 100%;
padding: 0 25upx;
font-size: 28upx;
line-height: 34upx;
}
.send-but { }
}
}
js代码
data() {
return {
Height:0,//输入框距离底部距离 默认为0
},
methods: {
//离开输入框触发
leaveInput(e){
this.keyBoardHeight = 0;//输入框失去焦点时让距离底部距离为 0
},
//点击输入框触发
getHeight(e){
console.log(e,'我是获取输入法高度的')
this.Height = e.target.height;//获取输入法的高度,动态设置输入框距离顶部距离。
},
}
亲测可以成功!
APP输入框问题可以参考:https://blog.csdn.net/SLife4599/article/details/114543821
还没有评论,来说两句吧...