微信小程序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:'說說對這個活動看法吧'
      })
    }
  }
})