uniapp微信小程序开发如何解决input框或者（textarea）框输入时界面被顶起，输入法遮盖输入框的问题？

深藏阁楼爱情的钟 2021-09-07 22:56 5661阅读 0赞

最近在写微信小程序开发，客服吐槽，点击输入时界面总是被顶起来，输入框也被遮挡了一半，以下是解决方案。  
首先将输入框设置为不向上顶页面的参数如下  
**输入框参数**

: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  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/69ef5cee2ee8466b9604b851ce35e5d6.png