微信小程序input、textarea层级穿透问题 问题描述:表示在文本域输入内容，在失去焦点时，内容脱离文本框

 

 

 解决思路:借助一个变量使其在得到焦点的时候是文本域或者文本框，失去焦点的时候变成div

在wxml中

<view class="questionBack-box hideBtn">
<textarea
value="{{content}}"
bindblur="bindContentBlur"
wx:if="{{isInputContentFocus}}"
placeholder="说说对这个活动看法吧"
focus="{{isFocus}}"
></textarea>
<div class="placeholder" wx:else bindtap="bindContentFocus">{{placeholder}}</div>
</view>

在wxss中

.placeholder{
cursor: auto;
width: 100%;
height: 300rpx;
display: block;
position: relative;
overflow-y: scroll;
}
.questionBack-box textarea,.placeholder{
font-size:22rpx;
color:rgba(111,116,121,1);
line-height:30rpx;
text-align: left;
padding-left: 20rpx;
box-sizing: border-box;
}

在js中输入

Page({
  data: {
    content:'',
    placeholder:'说说对这个活动看法吧',
    isInputContentFocus: false,
    isFocus: false
  },
  bindContentFocus(e) {  
    this.setData({
      isFocus : true, //触发焦点
      isInputContentFocus: true//聚焦时隐藏内容文本标签
    })
  },
  bindContentBlur(e) {  
    this.setData({
      isInputContentFocus : false,     //聚焦时隐藏内容文本标签
      isFocus : false, //失去焦点
      content:e.detail.value,
      placeholder: e.detail.value
    })
    if (e.detail.value== '') {
      this.setData({
        placeholder:'说说对这个活动看法吧'
      })
    }
  }
})