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
在这里插入图片描述

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值