uniapp微信小程序开发如何解决input框或者(textarea)框输入时界面被顶起,输入法遮盖输入框的问题?

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

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

  1. :adjust-position="false" //键盘弹起时,是否自动上推页面 默认的是true 将其改为false
  2. :show-confirm-bar="false" //这个是是否显示完成按钮的 默认也是true 我这边不需要,看情况设置
  3. @focus="getHeight" //输入框聚焦的时候触发 里面是触发的方法名称 可以自行设置
  4. @blur="leaveInput" //输入框失去焦点时触发 里面是失去焦点触发的方法名称 可以自行设置
  5. placeholder="请输入反馈内容" //输入框为空时提示语
  6. :auto-height="true" //是否自动增高 默认为false 我这边需要根据内容增高输入框所以设置为true

输入框html界面

  1. <!-- 下发发送模块 -->
  2. <view class="send-box" @touchmove.stop.prevent="moveStop" v-show="isSendShow" :style="[{ 'bottom':Height + 'px'}]">
  3. <view class="input-box">
  4. <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="请输入反馈内容" />
  5. </view>
  6. <view class="send-but" @click.stop="postfeedback">
  7. 发送
  8. </view>
  9. </view>

输入框css 此处用的是scss

  1. //发送 模块 .send-box {
  2. position: fixed;
  3. width: 100%;
  4. background-color: #FFFFFF;
  5. display: flex;
  6. align-items: center;
  7. padding: 18upx 32upx;
  8. justify-content: space-between; .input-box {
  9. // background-color: #0081FF;
  10. width: 90%;
  11. min-height: 64upx;
  12. max-height: 600upx;
  13. background: #F4F4F4;
  14. border-radius: 40upx;
  15. padding: 15upx 0upx; .input-text {
  16. width: 100%;
  17. padding: 0 25upx;
  18. font-size: 28upx;
  19. line-height: 34upx;
  20. }
  21. .send-but { }
  22. }
  23. }

js代码

  1. data() {
  2. return {
  3. Height:0,//输入框距离底部距离 默认为0
  4. },
  5. methods: {
  6. //离开输入框触发
  7. leaveInput(e){
  8. this.keyBoardHeight = 0;//输入框失去焦点时让距离底部距离为 0
  9. },
  10. //点击输入框触发
  11. getHeight(e){
  12. console.log(e,'我是获取输入法高度的')
  13. this.Height = e.target.height;//获取输入法的高度,动态设置输入框距离顶部距离。
  14. },
  15. }

亲测可以成功!
APP输入框问题可以参考:https://blog.csdn.net/SLife4599/article/details/114543821
在这里插入图片描述

发表评论

表情:
评论列表 (有 0 条评论,5699人围观)

还没有评论,来说两句吧...

相关阅读